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

最新推荐文章于 2021-02-24 11:31:38 发布

转载最新推荐文章于 2021-02-24 11:31:38 发布 · 966 阅读

extJs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在J2EE项目中利用ExtJs的TabPanel组件进行高效开发，包括正确配置JS引用、避免子页面重复加载、布局注意事项及示例代码等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

ExtJs的TabPanel做的非常棒，因此在J2EE开发中可以优先选用，但是要注意以下事项：

1.TabPanel是主页面，每一个tab标签就是一个自动加载的Jsp页面；

2.主页面包含了对ExtJs的JS引用，比如：

那么子页面就绝对不能再重复添加这些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);
});