ExtJs的TabPanel做的非常棒,因此在J2EE开发中可以优先选用,但是要注意以下事项:
1.TabPanel是主页面,每一个tab标签就是一个自动加载的Jsp页面;
2.主页面包含了对ExtJs的JS引用,比如:
<script src="${ctx}/ext3/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="${ctx}/ext3/ext-all-debug.js" type="text/javascript"></script>
<script src="${ctx}/ext3/ext-all.js" type="text/javascript"></script>
<script src="${ctx}/ext3/ext-lang-zh_CN.js" type="text/javascript"></script>
<link href="${ctx}/ext3/resources/css/ext-all.css" media="screen" rel="Stylesheet" type="text/css" />
那么子页面就绝对不能再重复添加这些JS引用;只能引用它页面用的js;
3.子页面不能使用Viewport对象布局;(IE中会显示不出来的)
4.tabPanel上面添加的各个panel(就是各个子页面)rendTo的DIV的id不能相同-----所有,建议各个子页面的id都不要重复
主页面例子如下:
Ext.onReady(function(){
var center=new Ext.TabPanel({
defaults:{autoScroll:true},
enableTabScroll:true,
collapsible:true,
autoHeight:true,
renderTo:'indexdiv',
items:[{
id:'01',
title:'Event任务分配',
autoHeight:true, // 自动加载jsp页面
autoLoad:{url:ctx+'/toEventTaskPage.action?optType=E',scripts:true},
listeners:{ // 添加监听器,点击此页面的tab时候要重新加载(刷新功能)
activate:function(){
this.getUpdater().refresh();
}
}
},{
id:'02',
title:'拆条任务分配',
autoHeight:true,
autoLoad:{url:ctx+'/toSplitEventTaskPage.action?optType=S',scripts:true},
listeners:{
activate:function(){
this.getUpdater().refresh();
}
}
},{
id:'03',
title:'其他任务分配',
autoHeight:true,
autoLoad:{url:ctx+'/toOtherTaskPage.action?optType=O',scripts:true},
listeners:{
activate:function(){
this.getUpdater().refresh();
}
}
}]
});
center.setActiveTab(0);
});
1:Ext4版本 双击Tab页面页签关闭 来自问题:http://www.iteye.com/problems/85832
解答:
- var tabs = Ext.createWidget('tabpanel', {
- renderTo: 'tabs1',
- width: 450,
- activeTab: 0,
- defaults :{
- bodyPadding: 10
- },
- listeners:{
- afterrender:function(tab){
- var tabBar = tab.down("tabbar");
- tab.mon(tabBar.el, {
- scope: this,
- dblclick:function(){
- tabs.remove(tab.getActiveTab());
- },
- delegate: 'div.x-tab'
- });
- }
- ......
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tabs1',
width: 450,
activeTab: 0,
defaults :{
bodyPadding: 10
},
listeners:{
afterrender:function(tab){
var tabBar = tab.down("tabbar");
tab.mon(tabBar.el, {
scope: this,
dblclick:function(){
tabs.remove(tab.getActiveTab());
},
delegate: 'div.x-tab'
});
}
......
关键是上面监听这块代码 代码写法参考自Ext4版本的TabCloseMenu.js里面的写法
比方里面有代码:
- init : function(tabpanel){
- this.tabPanel = tabpanel;
- this.tabBar = tabpanel.down("tabbar");
- this.mon(this.tabPanel, {
- scope: this,
- afterlayout: this.onAfterLayout,
- single: true
- });
- },
- onAfterLayout: function() {
- this.mon(this.tabBar.el, {
- scope: this,
- contextmenu: this.onContextMenu,
- delegate: 'div.x-tab'
- });
- },
init : function(tabpanel){
this.tabPanel = tabpanel;
this.tabBar = tabpanel.down("tabbar");
this.mon(this.tabPanel, {
scope: this,
afterlayout: this.onAfterLayout,
single: true
});
},
onAfterLayout: function() {
this.mon(this.tabBar.el, {
scope: this,
contextmenu: this.onContextMenu,
delegate: 'div.x-tab'
});
},
2:今天有朋友问到Extjs4中关于grid中鼠标覆盖行时修改行背景色的问题(只对某一个grid作用),由于一直用的2版本,对4版本不熟悉,所以着实费了点时间,但最后还是给解决。解决方案参考自国外论坛:
http://skirtlesden.com/articles/styling-extjs-grid-cells
下面给出解决具体代码:(比方覆盖背景红色)
首先:建立一个mycss.css文件
内容如下:
.custom-grid .x-grid-row-over .x-grid-cell { //很重要哦
background-color: #FF0000;//这里的颜色自己根据需求修改
border-bottom-color: #ffc;
border-top-color: #ff5;
color: #009;
}
然后给出一个测试例子代码:
- <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all-debug.css" />
- <link rel="stylesheet" type="text/css" href="mycss.css" />
- <script type="text/javascript" src="ext/ext-all-debug.js"></script>
- <script type="text/javascript">
- Ext.onReady(function(){
- var store = Ext.create('Ext.data.Store', {
- fields:['name', 'email', 'phone',"num"],
- data:{'items':[
- {id:"t1",'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" ,"num":"1" },
- {id:"t2", 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" ,"num":"1" },
- {id:"t3",'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" ,"num":"1" },
- {id:"t3", 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" ,"num":"1" }
- ]},
- proxy: {
- type: 'memory',
- reader: {
- idProperty : "i11d",
- type: 'json',
- root: 'items'
- }
- }
- });
- var grid = Ext.create('Ext.grid.Panel', {
- title: 'Simpsons',
- cls: 'custom-grid',//这里关键哦,和我之前建立的mycss文件里面的一致哦
- store: store,
- columns: [
- { header: 'Name', dataIndex: 'name' ,width:150},
- { header: 'Email', dataIndex: 'email' ,width:150},
- { header: 'Phone', dataIndex: 'phone' ,width:150}
- ],
- height: 400,
- width: 650,
- renderTo: Ext.getBody()
- });
- });