欢迎光临我的小站,共同学习交流技术:http://www.luchg.com
完整代码下载地址:http://www.luchg.com/resource/showResource_3.html
tabPanel.js:
Ext.require(
'Ext.tab.*'
);
Ext.onReady(
function(){
//添加一个Tab,在最后面添加
Ext.create(
'Ext.Button',
{
text:'添加一个Tab',
renderTo:Ext.getBody(),
handler:function(){
tabs.add(
{
title:'新添加的tab',
html:'这个tab是通过add添加的',
closable:true
}
);
}
}
);
//插入一个tab,可以指定插入的位置
Ext.create(
'Ext.Button',
{
text:'插入一个Tab',
renderTo:Ext.getBody(),
handler:function(){
tabs.add(3, //第一个参数是用来指定插入的位置
{
title:'新插入的tab',
html:'这个tab是通过insert插入来的',
closable:true
}
);
}
}
);
//删除tab---指定删除的位置
Ext.create(
'Ext.Button',
{
text:'根据位置删除tab',
renderTo:Ext.getBody(),
handler:function(){
//删除第四位置上的tab
tabs.remove(4);
}
}
);
//删除tab---删除指定id的tab
Ext.create(
'Ext.Button',
{
text:'根据id删除tab',
renderTo:Ext.getBody(),
handler:function(){
//删除id为tab3的tab
tabs.remove('tab3');
}
}
);
//设置活动窗口:
Ext.create(
'Ext.Button',
{
text:'设置活动窗口',
renderTo:Ext.getBody(),
handler:function(){
//设置2为活动窗口
tabs.setActiveTab(2);
}
}
);
var tabs = Ext.create(
'Ext.tab.Panel',
{
renderTo:Ext.getBody(),
activeTab:0,
width:600,
height:300,
plain:true,
defaults:{
autoScoll:true
},
items:[
{
id:'tab1',
title:'Tabs-1',
html:'这是一个普通的tab'
},{
id:'tab2',
title:'tab-2',
contentEl:'tab2'
},{
id:'tab3',
title:'ajax Tab',
autoLoad:{
url:'tabAction',
params:{
data:'从客户端传入的参数'
},
method:'GET'
}
},{
id:'4',
title:'事件tab',
listeners:{
activate:function(tab){
alert(tab.title + ': activate事件触发。');
}
},
html:'带事件的tab',
autoLoad:false
},{
id:'tab5',
title:'不可用的tab',
disabled: true
}
]
}
);
}
);
其他代码参考上一篇文章
效果图: