Ext.TabPanel 的用法以及初始化items

TabPanel不显示面板的标题和头部工具条。



1、主要配置项：
activeTab：初始激活的tab，索引或者id值，默认为none

autoTabs：是否自动将带有'x-tab'样式类的div转成tabs添加到TabPanel中，默认为false。
当该配置项设为true时，需要设置deferredRender为false，还必须使用applyTo。
deferredRender：是否延迟渲染，默认为true。（为false的话，全部初始化）

（这样里面的布局就得切换的时候，重新布局，设置属性

layoutOnTabChange : Boolean

True表示为每当Tab切换时就绘制一次布局。Set to true ...
True表示为每当Tab切换时就绘制一次布局。Set to true to do a layout of tab items as tabs are changed.
）
autoTabSelector：默认为'div.x-tab'。

resizeTabs：是否可以改变tab的尺寸，默认为false。
minTabWidth：tab的最小宽度，默认为30。
tabWidth：每个新增加的tab宽度，默认为120。
tabTip：tab的提示信息

tabPosition：tab位置，可选值有top、bottom，默认为top。
enableTabScroll：是否允许Tab溢出时可以滚动，默认为false。
closable：tab是否可关闭，默认为false

scrollDuration：每次的滚动时长，默认为0.35毫秒。
scrollIncrement：每次的滚动步长，默认为100像素。
wheelIncrement：每次鼠标滑轮的滚动步长，默认为20像素。



2、主要方法：
activate( String/Panel tab )
getActiveTab()：获取当前活动的tab
get( String/Number key )：根据组件id或者索引获取组件
getItem(String id)：根据tab id获取tab
setActiveTab( String/Number item )
remove( Component/String component, [Boolean autoDestroy] )
removeAll( [Boolean autoDestroy] )



3、范例


Js代码
new Ext.TabPanel({
id: "mainTab",
renderTo: "div1",
width: 500,
height: 300,
activeTab: 0,
defaults: {
autoScroll: true,
autoHeight:true,
style: "padding:5"
},
items:[
{title:"normal", tabTip:"mormal", html:"tab1", iconCls:"add"},
{title:"ajax1", autoLoad:"messagebox.action", iconCls:"delete"},
{title:"ajax2", autoLoad:{url:"test.action", params:"p1=v1", nocache:true}, iconCls:"search"},
{title:"event", iconCls:"save", listeners:{activate:activateHandler}}
],
enableTabScroll: true
});

function activateHandler(tab){
//alert(tab.title);
}

var index = 0;
function addTab(){
var tabs = Ext.getCmp("mainTab");

var t = tabs.getItem("tab"+index);
if(t) tabs.remove(t);

tabs.add({
id: "tab" + (++index),
title: "NewTab" + index,
html: "new tab" + index,
closable: true
}).show();
}

//按钮渲染到div1元素之前
new Ext.Button({
text:"add tab",
handler:addTab,
iconCls:"add"
}).render(document.body, "div1");

new Ext.TabPanel({ id: "mainTab", renderTo: "div1", width: 500, height: 300, activeTab: 0, defaults: { autoScroll: true, autoHeight:true, style: "padding:5" }, items:[ {title:"normal", tabTip:"mormal", html:"tab1", iconCls:"add"}, {title:"ajax1", autoLoad:"messagebox.action", iconCls:"delete"}, {title:"ajax2", autoLoad:{url:"test.action", params:"p1=v1", nocache:true}, iconCls:"search"}, {title:"event", iconCls:"save", listeners:{activate:activateHandler}} ], enableTabScroll: true }); function activateHandler(tab){ //alert(tab.title); } var index = 0; function addTab(){ var tabs = Ext.getCmp("mainTab"); var t = tabs.getItem("tab"+index); if(t) tabs.remove(t); tabs.add({ id: "tab" + (++index), title: "NewTab" + index, html: "new tab" + index, closable: true }).show(); } //按钮渲染到div1元素之前 new Ext.Button({ text:"add tab", handler:addTab, iconCls:"add" }).render(document.body, "div1");