add extjs 6.0.1 sources

[extjs.git] / extjs / templates / executive-dashboard / app / view / main / Main.js

/**\r
 * This class is the main view for the application. It is specified in app.js as the\r
 * "autoCreateViewport" property. That setting automatically applies the "viewport"\r
 * plugin to promote that instance of this class to the body element.\r
 */\r
Ext.define('ExecDashboard.view.main.Main', {\r
    extend: 'Ext.tab.Panel',\r
    xtype: 'app-main',\r
\r
    requires: [\r
        'ExecDashboard.view.*'\r
    ],\r
\r
    controller: 'main',\r
\r
    viewModel: {\r
        type: 'main'\r
    },\r
\r
    ui: 'navigation',\r
    cls: 'exec-menu-navigation',\r
\r
    tabBarHeaderPosition: 1,\r
    titleRotation: 0,\r
    tabRotation: 0,\r
\r
    header: {\r
        layout: {\r
            align: 'stretchmax'\r
        },\r
        iconCls: 'exec-header-icon',\r
        title: {\r
            text: 'MyBiz',\r
            textAlign: 'center',\r
            flex: 0,\r
            minWidth: 160\r
        },\r
        tools: [{\r
            type: 'gear',\r
            plugins: 'responsive',\r
            width: 120,\r
            margin: '0 0 0 0',\r
            handler: 'onSwitchTool',\r
            responsiveConfig: {\r
                'width < 768 && tall': {\r
                    visible: true\r
                },\r
                'width >= 768': {\r
                    visible: false\r
                }\r
            }\r
        }]\r
    },\r
\r
    tabBar: {\r
        flex: 1,\r
        layout: {\r
            align: 'stretch',\r
            overflowHandler: 'none'\r
        }\r
    },\r
\r
    responsiveConfig: {\r
        tall: {\r
            headerPosition: 'top'\r
        },\r
        wide: {\r
            headerPosition: 'left'\r
        }\r
    },\r
\r
    listeners: {\r
        tabchange: 'onTabChange'\r
    },\r
\r
    defaults: {\r
        tabConfig: {\r
            plugins: 'responsive',\r
            responsiveConfig: {\r
                wide: {\r
                    iconAlign: 'left',\r
                    textAlign: 'left',\r
                    flex: 0\r
                },\r
                tall: {\r
                    iconAlign: 'top',\r
                    textAlign: 'center',\r
                    flex: 1\r
                },\r
                'width < 768 && tall': {\r
                    visible: false\r
                },\r
                'width >= 768': {\r
                    visible: true\r
                }\r
            }\r
        }\r
    },\r
\r
    items: [{\r
        // This page has a hidden tab so we can only get here during initialization. This\r
        // allows us to avoid rendering an initial activeTab only to change it immediately\r
        // by routing\r
        xtype: 'component',\r
        tabConfig: {\r
            hidden: true\r
        }\r
    },{\r
        xtype: 'kpi',\r
        title: 'KPI Overview',\r
        iconCls: 'exec-kpi-icon'\r
    },{\r
        xtype: 'quarterly',\r
        title: 'Performance',\r
        iconCls: 'exec-quarterly-icon'\r
    },{\r
        xtype: 'profitloss',\r
        title: 'Profit & Loss',\r
        iconCls: 'exec-pl-icon'\r
    },{\r
        xtype: 'news',\r
        title: 'Company News',\r
        iconCls: 'exec-news-icon'\r
    }],\r
\r
    // This object is a config for the popup menu we present on very small form factors.\r
    // It is used by our controller (MainController).\r
    assistiveMenu: {\r
        items: [{\r
            text: 'KPI Overview',\r
            height: 50,\r
            iconCls: 'exec-kpi-icon'\r
        },{\r
            text: 'Performance',\r
            height: 50,\r
            iconCls: 'exec-quarterly-icon'\r
        },{\r
            text: 'Profit & Loss',\r
            height: 50,\r
            iconCls: 'exec-pl-icon'\r
        },{\r
            text: 'Company News',\r
            height: 50,\r
            iconCls: 'exec-news-icon'\r
        }],\r
        listeners: {\r
            click: 'onMenuClick'\r
        }\r
    }\r
});\r