tabpanel是extjs中一种比较常用的布局容器控件,也比较简单。
///1:相关的插件, var tabScrollerMenu = Ext.create("Ext.ux.TabScrollerMenu", { maxText: 15, pageSize: 100 }); var tabReorderer = Ext.create('Ext.ux.TabReorderer'); var tabClosePlugin = Ext.create('Ext.ux.TabCloseMenu', { closeTabText: '关闭', closeOthersTabsText: '关闭其他页签', closeAllTabsText: '关闭所有页签' }); ///2:创建页签容器,内容容器,放置各种控件或者是html zhuUx.tabs = Ext.widget('tabpanel', { activeTab: 0, floating: false, plugins: [tabScrollerMenu, tabClosePlugin, tabReorderer], region: 'center', collapseMode: "undefined", listeners: { tabchange: { scope: zhuUx, fn: zhuUx.mainTabChanged } }, defaults: { bodyPadding: 1 }, items: [] }); /// 3:动态加入页签,避免重复加入页签, /// 解决办法是给每个页签加上唯一标记属性, /// 判断一下唯一标识是否存在,存在则不添加了 var currentTabsCount = zhuUx.tabs.items.length; for (i = 0; i < currentTabsCount; i++) { if (zhuUx.tabs.items.getAt(i).businessObjectId == businessObjectId) { zhuUx.tabs.setActiveTab(i); return; } } var dataManagerPanel = Ext.create(zhuUx.itemEditor, { businessObjectId: businessObjectId, closable: true, title: "test" }); zhuUx.tabs.add(dataManagerPanel).show(); ///4:对页签进行隐藏,显示,移除,删除,激活等操作 zhuUx.tabs.getTabBar().items.getAt(i).show(); zhuUx.tabs.getTabBar().items.getAt(i).hide(); zhuUx.tabs.remove() ///6:隐藏页签表头 zhuUx.tabs.getTabBar().hide(); ///5:页签切换事件 mainTabChanged: function (tabPanel, newCard, oldCard, eOpts) { var zhuUx = this; if (newCard != zhuUx.luxianTab) { /// 判断数据,是否需要刷新 try { } catch (e) { } } newCard.updateLayout(); }, ///6:常见页签的属性与方法
closable ///是否可关闭
iconCls ///图标样式
iconAlign ///图标对齐方式
disabled ///是否禁用