最近在做的一个项目基本框架是：
前台：extJs
后台：Java
在做这项目有快一年了，有些体会想和大家分享分享，所以决定利用这个平台一方面是记录一些自己的心得，另一方面也希望能在这里给大家带来更多的知识，和大家好好交流交流。
进入正题：
在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就建好了，效果还不错，就不上图了，由于是在公司做项目，所以要保密，上面的内容是经过整理得到的，应该属于自己的知识了！
谢谢，大家关注我们的【爱思特-专业的软件开发知识库】 www.astesys.com
相关文章:
