add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / tab / Panel.js

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