[转载]ExtJS中tabPanel的实现详解
在做这项目有快一年了，有些体会想和大家分享分享，所以决定利用这个平台一方面是记录一些自己的心得，另一方面也希望能在这里给大家带来更多的知识，和大家好好交流交流。





进入正题：



在extJS中有个叫tabPanel的玩意做的挺炫的，但是官方的api写的不是很详细，下面用一个简单的sample和大家详细探讨一下是怎么实现的。





一般来说tabpanel都是嵌在中panel中的，下面【爱思特】就和大家说说在项目中，如果你对我们的团队有兴趣，请关注我们的网站，www#astesys#com(“#”换成”.”)，你可以通过邮件订阅我们的内容，我们会每天发送给你最新的技术知识！



如 在主panel中加入一个item，如下：

items:[my.test.initTabPnl()]



下面是my.test.initTabPnl()方法

/**

* Tab页区域

*/

my.test.initTabPnl=function(){

//在my.test.listGrid中选择一条记录

my.test.sel = my.test.listGrid.getSelectionModel().getSelected();

//选择这条记录的相关列

my.test.currId = my.test.sel.get("ID");

var lx = my.test.sel.get("LX");

var tabPnl = new Ext.TabPanel({

activeTab: 0,

region: ‘center’,

border: false,

layoutOnTabChange: true,

defaults: {autoScroll:true},

enableTabScroll:true,

items: [

//Tab页区域1

{

title: 'Tab页区域1',

id:'panel1',

name:'panel1',

layout : 'fit',

items:[my.test.initForm(bdzlx,true)],

//动作监听，点击这个tabpanel页， my.test.panel的工具条上的第二个button就会灰掉

listeners : {

activate : function(){

my.test.panel.getTopToolbar().items.items[1].disable();

}

}

},

//Tab页区域2

{

title: ‘Tab页区域2′,

id:’panel2′,

name:’panel2′,

layout : ‘fit’,

items:[ my.test.initJsycsyjlGrid()],

listeners : {

activate : function(){

my.test.panel.getTopToolbar().items.items[1].enable();

}

}

},

//Tab页区域3

{

title: ‘Tab页区域3′,

id:’panel3′,

name:’panel3′,

layout : ‘fit’,

items:[ my.test.initGrid()],

listeners : {

activate : function(){

my.test.panel.getTopToolbar().items.items[1].enable();

}

}

}

]

});

tabPnl.doLayout();

my.test.tabPnlView = tabPnl;

return tabPnl;

}



到此，基本上一个tabPanel就建好了，效果还不错，就不上图了，由于是在公司做项目，所以要保密，上面的内容是经过整理得到的，应该属于自己的知识了