extjs怎么设置tabpanel详解

Ext.onReady(function(){

vari=4;

//注意:每个Tab标签只渲染一次

vartabs=newExt.TabPanel({

renderTo:Ext.getBody(),//绑定在body标签上

activeTab:0,//初始显示第几个Tab页

deferredRender:false,//是否在显示每个标签的时候再渲染标签中的内容.默认true

tabPosition:'top',//表示TabPanel头显示的位置,只有两个值top和bottom.默认是top.

enableTabScroll:true,//当Tab标签过多时,出现滚动条

items:[{//Tab的个数

title:'Tab1',

html:'Asimpletab',

listeners:{render:function(){//为每个Tab标签添加监听器.当标签渲染时触发

Ext.Msg.alert("Tab1","渲染Tab1成功");

}}

},{

title:'Tab2',

html:'Anotherone',

listeners:{render:myRender}

},{

title:'Tab3',

autoLoad:'test.html',

closable:true,

listeners:{render:myRender}

}],

bbar:[{//添加一个底部工具栏,并且在该工具栏上添加两个按钮

text:'添加标签',

handler:function(){//添按钮被点击时触发这个匿名函数(注意:该属性在button中能查到).

varid=i;

tabs.add({//添加一个Tab标签

id:id,

title:'Tab'+i,

closable:true

});

i=i+1;

tabs.setActiveTab(id);//当id为"id"的Tab标签显示(变为活动标签).

}

},{

text:'删除标签',

handler:function(){

vart=tabs.getActiveTab();//获得当前活动标签的引用

if(t.closable){

tabs.remove(t);//删除标签

}else{

Ext.Msg.alert("提示","该标签不能关闭");

}

}

}]

});

//把TabPanel组件充满整个body容器.

newExt.Viewport({

layout:'fit',

items:tabs

});

});