Ext_标签面板_Ext.TabPanel

/* Ext.TabPanel主要配置项目表: activeTab String/Number 设置默认激活的tab页的id或索引 animScroll Boolean 设置是否在tab页滚动时用动画效果 autoTabSelector String 在dom中自动找div的样式选择器(默认'div.x-tab',在autoTabs=true时生效) autoTabs Boolean 设置是否在dom中查找样式类为'x-tab'的div,并转换为tab页(默认false) enableTabScroll Boolean 是否在tab标签总宽度超出可用宽度时自动出现滚动按钮(默认false) layoutOnTabChange Boolean 是否在tab页切换时重新对tab页元素进行布局 minTabWidth Number tab标签最小宽度(默认30,只在resizeTabs=true生效) resizeTabs Boolean 设置是否允许tab标签自动调整宽度 scrollDuration Float 每次滚动tab标签执行动画的时间(默认.35,只在animScroll=true生效) scrollIncrement Number 每次滚动tab标签的长度(默认100,只在enableTabScroll=true生效) scrollRepeatInterval Number 鼠标左键连续按下，执行滚动操作的时间间隔 tabMargin Number 以像素为单位计算的空白空间 tabPosition String tab标签在面板上的位置(默认top,bottom) tabWidth Number tab标签的初始宽度(默认120) */

 

1.通过items添加标签页

/*通过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.通过页面div自动添加标签页

/*通过页面div自动添加标签示例*/ 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定位 } /* 自动扫描有效div转换为tab页 有效div:该div必须是在applyTo:'panel'中的div，且必须有正确的样式类,默认'x-tab',可通过autoTabSelector指定 */ new Ext.TabPanel(config); });

<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.动态添加标签页

/*动态添加标签页*/ 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); } });