extjs 4tabpanel学习总结

ExtJS的TabPanel在Java应用中使用总结

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

解答：   

Java代码  

1. var tabs = Ext.createWidget('tabpanel', {   
2.         renderTo: 'tabs1',   
3.         width: 450,   
4.         activeTab: 0,   
5.         defaults :{   
6.             bodyPadding: 10  
7.         },   
8.   
9.   listeners:{   
10.     afterrender:function(tab){   
11.      var tabBar = tab.down("tabbar");   
12.       tab.mon(tabBar.el, {   
13.       scope: this,   
14.       dblclick:function(){   
15.        tabs.remove(tab.getActiveTab());   
16.       },   
17.       delegate: 'div.x-tab'  
18.      });   
19.           
20.     }   
21. ......         

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里面的写法

比方里面有代码：

Java代码  

1. init : function(tabpanel){   
2.     this.tabPanel = tabpanel;   
3.     this.tabBar = tabpanel.down("tabbar");   
4.   
5.     this.mon(this.tabPanel, {   
6.         scope: this,   
7.         afterlayout: this.onAfterLayout,   
8.         single: true  
9.     });   
10. },   
11.   
12. onAfterLayout: function() {   
13.     this.mon(this.tabBar.el, {   
14.         scope: this,   
15.         contextmenu: this.onContextMenu,   
16.         delegate: 'div.x-tab'  
17.     });   
18. },  

    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; 

  }

 

 

    然后给出一个测试例子代码：

 

 

Java代码  

1. <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all-debug.css" />   
2. <link rel="stylesheet" type="text/css" href="mycss.css" />   
3. <script type="text/javascript" src="ext/ext-all-debug.js"></script>   
4. <script type="text/javascript">   
5.         
6.     Ext.onReady(function(){   
7.         var store = Ext.create('Ext.data.Store', {   
8.             fields:['name', 'email', 'phone',"num"],   
9.             data:{'items':[   
10.                 {id:"t1",'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224" ,"num":"1" },   
11.                 {id:"t2", 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234"  ,"num":"1" },   
12.                 {id:"t3",'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224" ,"num":"1" },   
13.                 {id:"t3", 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234"  ,"num":"1" }   
14.   
15.             ]},   
16.   
17.             proxy: {   
18.                 type: 'memory',   
19.                 reader: {   
20.                     idProperty : "i11d",   
21.                     type: 'json',   
22.                     root: 'items'  
23.                 }   
24.             }   
25.         });   
26.   
27.         var grid = Ext.create('Ext.grid.Panel', {   
28.             title: 'Simpsons',   
29.             cls: 'custom-grid',//这里关键哦，和我之前建立的mycss文件里面的一致哦   
30.             store: store,   
31.             columns: [   
32.                 { header: 'Name',  dataIndex: 'name' ,width:150},   
33.                 { header: 'Email', dataIndex: 'email' ,width:150},   
34.                 { header: 'Phone', dataIndex: 'phone'  ,width:150}   
35.             ],   
36.             height: 400,   
37.             width: 650,   
38.             renderTo: Ext.getBody()   
39.         });   
40.   
41.            
42.     });