在做这项目有快一年了,有些体会想和大家分享分享,所以决定利用这个平台一方面是记录一些自己的心得,另一方面也希望能在这里给大家带来更多的知识,和大家好好交流交流。
进入正题:
在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就建好了,效果还不错,就不上图了,由于是在公司做项目,所以要保密,上面的内容是经过整理得到的,应该属于自己的知识了