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

http://hi.baidu.com/huahua035/item/d848a035015b144f3075a1a1

 

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);
});