add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / history / history.js

Ext.require([\r
    'Ext.util.History',\r
    'Ext.tab.Panel'\r
]);\r
\r
Ext.onReady(function() {\r
    // The only requirement for this to work is that you must have a hidden field and\r
    // an iframe available in the page with ids corresponding to Ext.History.fieldId\r
    // and Ext.History.iframeId.  See history.html for an example.\r
    Ext.History.init();\r
\r
    // Needed if you want to handle history for multiple components in the same page.\r
    // Should be something that won't be in component ids.\r
    var tokenDelimiter = ':';\r
    \r
    function onTabChange(tabPanel, tab) {\r
        var tabs = [],\r
            ownerCt = tabPanel.ownerCt, \r
            oldToken, newToken;\r
\r
        tabs.push(tab.id);\r
        tabs.push(tabPanel.id);\r
\r
        while (ownerCt && ownerCt.is('tabpanel')) {\r
            tabs.push(ownerCt.id);\r
            ownerCt = ownerCt.ownerCt;\r
        }\r
        \r
        newToken = tabs.reverse().join(tokenDelimiter);\r
        \r
        oldToken = Ext.History.getToken();\r
       \r
        if (oldToken === null || oldToken.search(newToken) === -1) {\r
            Ext.History.add(newToken);\r
        }\r
    }\r
    \r
    // Handle this change event in order to restore the UI to the appropriate history state\r
    function onAfterRender() {\r
        Ext.History.on('change', function(token) {\r
            var parts, length, i;\r
            \r
            if (token) {\r
                parts = token.split(tokenDelimiter);\r
                length = parts.length;\r
                \r
                // setActiveTab in all nested tabs\r
                for (i = 0; i < length - 1; i++) {\r
                    Ext.getCmp(parts[i]).setActiveTab(Ext.getCmp(parts[i + 1]));\r
                }\r
            }\r
        });\r
        \r
        // This is the initial default state.  Necessary if you navigate starting from the\r
        // page without any existing history token params and go back to the start state.\r
        var activeTab1 = Ext.getCmp('main-tabs').getActiveTab(),\r
            activeTab2 = activeTab1.getActiveTab();\r
            \r
        onTabChange(activeTab1, activeTab2);\r
    }\r
    \r
    Ext.create('Ext.TabPanel', {\r
        renderTo: Ext.getBody(),\r
        id: 'main-tabs',\r
        height: 300,\r
        width: 600,\r
        activeTab: 0,\r
        defaults: {\r
            padding: 10\r
        },\r
        \r
        items: [{\r
            xtype: 'tabpanel',\r
            title: 'Tab 1',\r
            id: 'tab1',\r
            activeTab: 0,\r
            padding: 5,\r
            border: true,\r
            plain: true,\r
            \r
            defaults: {\r
                padding: 10\r
            },\r
\r
            items: [{\r
                title: 'Sub-tab 1',\r
                id: 'subtab1',\r
                html: 'Sub-tab 1 content'\r
            },{\r
                title: 'Sub-tab 2',\r
                id: 'subtab2',\r
                html: 'Sub-tab 2 content'\r
            },{\r
                title: 'Sub-tab 3',\r
                id: 'subtab3',\r
                html: 'Sub-tab 3 content'\r
            }],\r
            \r
            listeners: {\r
                tabchange: onTabChange\r
            }\r
        },{\r
            title: 'Tab 2',\r
            id: 'tab2',\r
            html: 'Tab 2 content'\r
        },{\r
            title: 'Tab 3',\r
            id: 'tab3',\r
            html: 'Tab 3 content'\r
        },{\r
            title: 'Tab 4',\r
            id: 'tab4',\r
            html: 'Tab 4 content'\r
        },{\r
            title: 'Tab 5',\r
            id: 'tab5',\r
            html: 'Tab 5 content'\r
        }],\r
        listeners: {\r
            tabchange: onTabChange,\r
            afterrender: onAfterRender \r
        }\r
    });\r
});