Ext.TabPanel选项面板

基本的选项卡

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");