add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / history / history-router.js

Ext.define('Router.controller.Navigation', {\r
    extend : 'Ext.app.Controller',\r
\r
    config : {\r
        control : {\r
            '#main-tabs' : {\r
                tabchange : 'onTabChange'\r
            },\r
            '#tab6'      : {\r
                tabchange : 'onChildTabChange'\r
            }\r
        },\r
        refs    : {\r
            tabPanel : '#main-tabs'\r
        },\r
        routes  : {\r
            'main-tabs:id:subid' : {\r
                action     : 'showTab',\r
                before     : 'beforeShowTab',\r
                conditions : {\r
                    //take control of the :id & :subid parameters, make them optional but delimited by colon\r
                    ':id'    : '(?:(?::){1}([%a-zA-Z0-9\-\_\s,]+))?',\r
                    ':subid' : '(?:(?::){1}([%a-zA-Z0-9\-\_\s,]+))?'\r
                }\r
            }\r
        }\r
    },\r
\r
    onTabChange : function(tabPanel, newItem) {\r
        var id    = newItem.getId(),\r
            child = newItem.child('tabpanel'),\r
            subid = '',\r
            hash  = 'main-tabs:' + id;\r
\r
        if (child) {\r
            newItem = child.getActiveTab();\r
            subid   = ':' + newItem.getId();\r
\r
            hash += subid;\r
        }\r
\r
        this.redirectTo(hash);\r
    },\r
\r
    onChildTabChange : function(tabPanel, newItem) {\r
        var parentTab = tabPanel.up(),\r
            parentId  = parentTab.getId(),\r
            hash      = 'main-tabs:' + parentId + ':' + newItem.getId();\r
\r
        this.redirectTo(hash);\r
    },\r
\r
    beforeShowTab : function(id, subid, action) {\r
        var tabPanel = this.getTabPanel(),\r
            child;\r
\r
        if (!id) {\r
            //no id was specified, use 0 index to resolve child\r
            id = 0;\r
        }\r
\r
        child = tabPanel.getComponent(id);\r
\r
        if (child) {\r
            //tab found, resume the action\r
            action.resume();\r
        } else {\r
            Ext.Msg.alert('Tab Not Found', 'Tab with id or index "<b>' + id + '</b>" was not found!');\r
\r
            //child not found, stop action\r
            action.stop();\r
        }\r
    },\r
\r
    showTab : function(id, subid) {\r
        var tabPanel = this.getTabPanel(),\r
            child, childTabPanel;\r
\r
        if (!id) {\r
            //no id was specified, use 0 index to resolve child\r
            id = 0;\r
        }\r
\r
        child = tabPanel.getComponent(id);\r
\r
        childTabPanel = child.child('tabpanel');\r
\r
        tabPanel.setActiveTab(child);\r
\r
        if (childTabPanel) {\r
            if (!subid) {\r
                subid = 0;\r
            }\r
\r
            childTabPanel.setActiveTab(subid);\r
        }\r
    }\r
});\r
\r
Ext.application({\r
    name : 'Router',\r
\r
    requires : [\r
        'Ext.tab.Panel',\r
        'Ext.window.MessageBox'\r
    ],\r
\r
    controllers : [\r
        'Navigation'\r
    ],\r
\r
    defaultToken : 'main-tabs',\r
\r
    launch : function() {\r
\r
        Ext.create('Ext.tab.Panel', {\r
            renderTo  : Ext.getBody(),\r
            id        : 'main-tabs',\r
            height    : 300,\r
            width     : 600,\r
            activeTab : 0,\r
            defaults  : {\r
                padding : 10\r
            },\r
            items     : [\r
                {\r
                    title  : 'Tab 1',\r
                    id     : 'tab1',\r
                    layout : 'fit',\r
                    items  : [\r
                        {\r
                            xtype     : 'tabpanel',\r
                            id        : 'tab6',\r
                            items     : [\r
                                {\r
                                    title : 'Sub-tab 1',\r
                                    id    : 'subtab1'\r
                                },\r
                                {\r
                                    title : 'Sub-tab 2',\r
                                    id    : 'subtab2'\r
                                },\r
                                {\r
                                    title : 'Sub-tab 3',\r
                                    id    : 'subtab3'\r
                                }\r
                            ]\r
                        }\r
                    ]\r
                },\r
                {\r
                    title  : 'Tab 2',\r
                    id     : 'tab2',\r
                    html   : 'Tab 2 content'\r
                },\r
                {\r
                    title : 'Tab 3',\r
                    id    : 'tab3',\r
                    html  : 'Tab 3 content'\r
                },\r
                {\r
                    title : 'Tab 4',\r
                    id    : 'tab4',\r
                    html  : 'Tab 4 content'\r
                },\r
                {\r
                    title : 'Tab 5',\r
                    id    : 'tab5',\r
                    html  : 'Tab 5 content'\r
                }\r
            ]\r
        });\r
\r
    }\r
});