一、tabPanel主要配置项
activeTab
初始激活的tab，索引或者id值，默认为none
autoTabs
是否自动将带有'x-tab'样式类的div转成tabs添加到TabPanel中，默认为false。当该配置项设为true时，需要设deferredRender为false，还必须使用applyTo。
deferredRender
是否延迟渲染，默认为true。
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像素。
二、tabPanel主要方法
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] )
移除所有面板
三、Tab的正文内容获取方式
1、基本方式 : 通过定义html和items的方式。
Ext.onReady(function(){
var config = { height:150, width:300, activeTab:0, //默认激活第一个tab页 animScroll:true, //使用动画滚动效果 enableTabScroll:true, //tab标签过宽时自动显示滚动条 renderTo:'panel', //通过items将标签页以子面板的方式加入TabPanel items:[ {title:'tab标签页1',html:'tab标签页1内容'}, {title:'tab标签页2',html:'tab标签页2内容'}, {title:'tab标签页3',html:'tab标签页3内容'}, {title:'tab标签页4',html:'tab标签页4内容'}, {title:'tab标签页5',html:'tab标签页5内容'} ] } new Ext.TabPanel(config); });
2.读取其他html的信息 : 通过设置contentEl就可以获取其他html的信息为当前tab正文。
<script> Ext.onReady(function(){ var config = { height:50, width:300, autoTabs:true, //自动扫描页面中的有效div然后转换为标签 deferredRender:false, //不进行延时渲染 //deferredRender:true, activeTab:0, //默认激活第一个标签 animScroll:true, //使用动画滚动效果 enableTabScroll:true, //tab标签超宽时自动出现滚动条 applyTo:'panel' //此处必须使用applayTo定位 } new Ext.TabPanel(config); }); script> <div id="panel"> <div class="x-tab" title="tab标签页1">tab标签页1内容div> <div class="x-tab" title="tab标签页2">tab标签页2内容div> <div class="x-tab" title="tab标签页3">tab标签页3内容div> <div class="x-tab" title="tab标签页4">tab标签页4内容div> <div class="x-tab" title="tab标签页5">tab标签页5内容div> div> <div class="x-tab" title="tab标签页6">无效tab标签页6内容div>
3、读取服务端数据:通过定义autoLoad异步方式获取服务端数据。
4、动态添加标签页
Ext.onReady(function(){
var config = { height:150, width:300, activeTab:0, //默认激活第一个tab页 animScroll:true, //使用动画滚动效果 enableTabScroll:true, //tab标签超宽时自动出现滚动按钮 renderTo:'panel', items:[ {title:'tab标签页1',html:'tab标签页1内容'} ], //自动添加标签的按钮 buttons:[ { text:'添加标签页', handler:addTabPage //处理函数 } ] } var tabPanel = new Ext.TabPanel(config); //添加tab页 function addTabPage() { var index = tabPanel.items.length + 1; //创建新标签页 var tabPage = tabPanel.add({ title:'tab标签页' + index, html:'tab标签页' + index + '内容', closable:true //允许关闭该标签页 }); //设置当前显示的标签页 tabPanel.setActiveTab(tabPage); } });
四、tabPanel完整实例
function myRender(p){
Ext.Msg.alert("提示",p.title+"渲染成功") ; } Ext.onReady(function(){ var i = 4 ; //注意:每个Tab标签只渲染一次 var tabs = new Ext.TabPanel({ renderTo: Ext.getBody(),//绑定在body标签上 activeTab: 0,//初始显示第几个Tab页 deferredRender: false,//是否在显示每个标签的时候再渲染标签中的内容.默认true tabPosition: 'top',//表示TabPanel头显示的位置,只有两个值top和bottom.默认是top. enableTabScroll: true,//当Tab标签过多时,出现滚动条 items: [{//Tab的个数 title: 'Tab 1', html: 'A simple tab', listeners: {render:function(){//为每个Tab标签添加监听器.当标签渲染时触发 Ext.Msg.alert("Tab 1","渲染Tab 1成功") ; }} },{ title: 'Tab 2', html: 'Another one', listeners: {render: myRender} },{ title: 'Tab 3', autoLoad: 'test.html', closable: true, listeners: {render: myRender} }], bbar:[{//添加一个底部工具栏,并且在该工具栏上添加两个按钮 text:'添加标签', handler:function(){//添按钮被点击时触发这个匿名函数(注意:该属性在button中能查到). var id = i ; tabs.add({//添加一个Tab标签 id: id, title:'Tab '+i, closable: true }) ; i=i+1; tabs.setActiveTab(id) ;//当id为"id"的Tab标签显示(变为活动标签). } },{ text:'删除标签', handler: function(){ var t = tabs.getActiveTab();//获得当前活动标签的引用 if(t.closable){ tabs.remove(t);//删除标签 }else{ Ext.Msg.alert("提示","该标签不能关闭") ; } } }] }); //把TabPanel组件充满整个body容器. new Ext.Viewport({ layout: 'fit', items: tabs }); });