/** * Tab Panels are a great way to allow the user to switch between several pages that are all full screen. Each * Component in the Tab Panel gets its own Tab, which shows the Component when tapped on. Tabs can be positioned at * the top or the bottom of the Tab Panel, and can optionally accept title and icon * configurations (see {@link Ext.Button#iconCls iconCls} for additional information). * * Here's how we can set up a simple Tab Panel with tabs at the bottom. Use the controls at the top left of the example * to toggle between code mode and live preview mode (you can also edit the code and see your changes in the live * preview): * * @example miniphone preview * Ext.create('Ext.TabPanel', { * fullscreen: true, * tabBarPosition: 'bottom', * * defaults: { * styleHtmlContent: true * }, * * items: [ * { * title: 'Home', * iconCls: 'home', * html: 'Home Screen' * }, * { * title: 'Contact', * iconCls: 'user', * html: 'Contact Screen' * } * ] * }); * One tab was created for each of the {@link Ext.Panel panels} defined in the items array. Each tab automatically uses * the title and icon defined on the item configuration, and switches to that item when tapped on. We can also position * the tab bar at the top, which makes our Tab Panel look like this: * * @example miniphone preview * Ext.create('Ext.TabPanel', { * fullscreen: true, * * defaults: { * styleHtmlContent: true * }, * * items: [ * { * title: 'Home', * html: 'Home Screen' * }, * { * title: 'Contact', * html: 'Contact Screen' * } * ] * }); * */Ext.define('Ext.tab.Panel', { extend: 'Ext.Container', xtype : 'tabpanel', alternateClassName: 'Ext.TabPanel', requires: ['Ext.tab.Bar'], config: { /** * @cfg {Object} tabBar * An Ext.tab.Bar configuration. * @accessor */ tabBar: true, /** * @cfg {String} tabBarPosition * The docked position for the {@link #tabBar} instance. * Possible values are 'top' and 'bottom'. * @accessor */ tabBarPosition: 'top', /** * @cfg layout * @inheritdoc */ layout: { type: 'card', animation: { type: 'slide', direction: 'left' } }, /** * @cfg cls * @inheritdoc */ cls: Ext.baseCSSPrefix + 'tabpanel' /** * @cfg {Boolean/String/Object} scrollable * @accessor * @hide */ /** * @cfg {Boolean/String/Object} scroll */ }, initialize: function() { this.callParent(); this.on({ beforeactivetabchange: 'doTabChange', delegate: '> tabbar', scope : this }); this.on({ disabledchange: 'onItemDisabledChange', delegate: '> component', scope : this }); }, /** * Tab panels should not be scrollable. Instead, you should add scrollable to any item that * you want to scroll. * @private */ applyScrollable: function() { return false; }, /** * Updates the Ui for this component and the {@link #tabBar}. */ updateUi: function(ui, oldUi) { var bar; this.callParent([ui, oldUi]); bar = this.getTabBar(); if (this.initialized && bar) { bar.setUi(newUi); } }, /** * @private */ updateActiveItem: function(newActiveItem, oldActiveItem) { if (newActiveItem) { var items = this.getInnerItems(), oldIndex = items.indexOf(oldActiveItem), newIndex = items.indexOf(newActiveItem), reverse = oldIndex > newIndex, animation = this.getLayout().getAnimation(), tabBar = this.getTabBar(), oldTab = tabBar.parseActiveTab(oldIndex), newTab = tabBar.parseActiveTab(newIndex); if (animation && animation.setReverse) { animation.setReverse(reverse); } this.callParent(arguments); if (newIndex != -1) { this.forcedChange = true; tabBar.setActiveTab(newIndex); this.forcedChange = false; if (oldTab) { oldTab.setActive(false); } if (newTab) { newTab.setActive(true); } } } }, /** * Updates this container with the new active item. * @param {Object} tabBar * @param {Object} newTab * @return {Boolean} */ doTabChange: function (tabBar, newTab) { var oldActiveItem = this.getActiveItem(), newActiveItem; this.setActiveItem(tabBar.indexOf(newTab)); newActiveItem = this.getActiveItem(); return this.forcedChange || oldActiveItem !== newActiveItem; }, /** * Creates a new {@link Ext.tab.Bar} instance using {@link Ext#factory}. * @param {Object} config * @return {Object} * @private */ applyTabBar: function(config) { if (config === true) { config = {}; } if (config) { Ext.applyIf(config, { ui: this.getUi(), docked: this.getTabBarPosition() }); } return Ext.factory(config, Ext.tab.Bar, this.getTabBar()); }, /** * Adds the new {@link Ext.tab.Bar} instance into this container. * @private */ updateTabBar: function(tabBar, oldTabBar) { var me = this; if (oldTabBar && me.removingTabBar === undefined) { me.remove(oldTabBar, true); } if (tabBar) { me.add(tabBar); me.setTabBarPosition(tabBar.getDocked()); } }, /** * Updates the docked position of the {@link #tabBar}. * @private */ updateTabBarPosition: function(position) { var tabBar = this.getTabBar(); if (tabBar) { tabBar.setDocked(position); } }, onItemAdd: function(card) { var me = this; if (!card.isInnerItem()) { return me.callParent(arguments); } var tabBar = me.getTabBar(), initialConfig = card.getInitialConfig(), tabConfig = initialConfig.tab || {}, tabTitle = (card.getTitle) ? card.getTitle() : initialConfig.title, tabIconCls = (card.getIconCls) ? card.getIconCls() : initialConfig.iconCls, tabHidden = (card.getHidden) ? card.getHidden() : initialConfig.hidden, tabDisabled = (card.getDisabled) ? card.getDisabled() : initialConfig.disabled, tabBadgeText = (card.getBadgeText) ? card.getBadgeText() : initialConfig.badgeText, innerItems = me.getInnerItems(), index = innerItems.indexOf(card), tabs = tabBar.getItems(), activeTab = tabBar.getActiveTab(), currentTabInstance = (tabs.length >= innerItems.length) && tabs.getAt(index), header = card.isPanel && card.getHeader(), tabInstance; if (tabTitle && !tabConfig.title) { tabConfig.title = tabTitle; } if (tabIconCls && !tabConfig.iconCls) { tabConfig.iconCls = tabIconCls; } if (tabHidden && !tabConfig.hidden) { tabConfig.hidden = tabHidden; } if (tabDisabled && !tabConfig.disabled) { tabConfig.disabled = tabDisabled; } if (tabBadgeText && !tabConfig.badgeText) { tabConfig.badgeText = tabBadgeText; } //<debug> if (!currentTabInstance && !tabConfig.title && !tabConfig.iconCls) { if (!tabConfig.title && !tabConfig.iconCls) { Ext.Logger.error('Adding a card to a tab container without specifying any tab configuration'); } } //</debug> tabInstance = Ext.factory(tabConfig, Ext.tab.Tab, currentTabInstance); if (!currentTabInstance) { tabBar.insert(index, tabInstance); } card.tab = tabInstance; if (header) { header.setHidden(true); } me.callParent(arguments); if (!activeTab && activeTab !== 0) { tabBar.setActiveTab(tabBar.getActiveItem()); } }, /** * If an item gets enabled/disabled and it has an tab, we should also enable/disable that tab * @private */ onItemDisabledChange: function(item, newDisabled) { if (item && item.tab) { item.tab.setDisabled(newDisabled); } }, // @private onItemRemove: function(item, index, destroying) { var me = this, tabBar = me.getTabBar(), clearBar; if (item === tabBar) { clearBar = me.removingTabBar === undefined; } else if (tabBar) { tabBar.remove(item.tab, true); } me.callParent([item, index, destroying]); if (clearBar) { // Important to remove this after callParent so the layout can // process before we destroy it. me.removingTabBar = destroying; me.setTabBar(null); delete me.removingTabBar; } }});