基本的选项卡
var tabs1 = Ext.createWidget('tabpanel', {
renderTo:"tabPanel",
activeTab: 1,//指定默认的活动tab
width: 600,
height: 120,
plain:true,//True表示tab候选栏上没有背景图片（默认为false）
enableTabScroll:true,//选项卡过多时，允许滚动
defaults: { autoScroll:true},
items: [{
id:"tab1",
title:'普通Tab',
html:"这只是一个非常普通的Tab。",
items:[{xtype:'button',text:'按钮'}],
closable:true//这个tab可以被关闭
}, {
id:"tab2",
title:'内容来至div',
contentEl:'oneTab'//指定了当前tab正文部分从哪个html元素读取
}, {
id:"tab3",
title:'Ajax Tab',
autoLoad: { url:'AjaxTabContent', params: { data:"从客户端传入的参数"}, method:'GET'}
}, {
id:"tab4",
title:'事件Tab',
listeners: { activate: handleActivate },
html:"带事件的Tab。"
}, {
id:"tab5",
title:'不可用Tab',
disabled:true,
html:"不可用的Tab，你是看不到我的。"
}]
});
//单击tab4后触发的事件
function handleActivate(tab) {
alert(tab.title +': activated事件触发。');
}
操作选项卡
新增一个Tab
tabs1.add({
title:'新Tab '+ (++index),
id:"newTab"+ index,
html:'选项卡文本部分 '+ (index) +'
',
closable:true
});
插入一个Tab
tabs1.insert(2, {
title:'新Tab '+ (++index),
id:"newTab"+ index,
html:'选项卡文本部分 '+ (index) +'
',
closable:true
});
删除一个Tab
tabs1.remove(2);
删除id为“tab1”的Tab
tabs1.remove("tab1");
