add extjs 6.0.1 sources

[extjs.git] / extjs / examples / modern / energy / app / view / Main.js

Ext.define("EnergyApp.view.Main", {\r
    extend: "Ext.Panel",\r
    requires: ["EnergyApp.view.Navigation"],\r
    config: {\r
        id: "main",\r
        fullscreen: true,\r
        layout: 'fit',\r
\r
        sheet: {\r
            hidden: true,\r
            enter: 'left',\r
            exit: 'left',\r
            hideOnMaskTap: true,\r
            zIndex: 400,\r
            layout: 'fit'\r
        },\r
\r
        mainRegion: {\r
            layout: 'card'\r
        },\r
\r
        launchScreen: {\r
            cls: 'launchscreen',\r
            scrollable: true,\r
            html: '<div>' +\r
                '<p><strong>This application visualizes US Energy data with charts from the Sencha Touch Charts package.</strong><br>' +\r
                'Start by selecting consumption or production.</p>' +\r
                '</div>'\r
        },\r
\r
        navigation: {\r
            width: 250,\r
            docked: 'left'\r
        },\r
\r
        navigationButton: {\r
            id: "navigationButton",\r
            iconCls: 'x-fa fa-arrow-down',\r
            text: Ext.os.is.Phone ? "" : "Navigate",\r
            zIndex: 30\r
        },\r
\r
        chartView: {\r
            xtype: 'chartview',\r
            id: 'chartView'\r
        },\r
\r
        title: '',\r
\r
        toolbar: {\r
            ui: 'dark',\r
            docked: 'top',\r
            items: [\r
                {\r
                    iconCls: 'x-fa fa-arrow-left',\r
                    id: 'prevButton',\r
                    disabled: true,\r
                    ui: 'back',\r
                    align: 'left'\r
                },\r
                {\r
                    iconCls: 'x-fa fa-arrow-right',\r
                    id: 'nextButton',\r
                    disabled: true,\r
                    ui: 'forward',\r
                    align: 'right'\r
                }\r
            ]\r
        },\r
\r
        navigationDocked: true\r
    },\r
\r
    updateNavigationDocked: function (docked) {\r
        var navigation = this.getNavigation(),\r
            navigationButton = this.getNavigationButton(),\r
            sheet = this.getSheet();\r
\r
        if (docked) {\r
            sheet.hide(false);\r
            this.add(navigation);\r
\r
            navigation.setConfig({\r
                docked: 'left',\r
                width: 250,\r
                height: null\r
            });\r
        } else {\r
            sheet.add(navigation);\r
\r
            if (Ext.os.is.Phone) {\r
                sheet.setConfig({\r
                    height: '80%'\r
                });\r
            }\r
            navigation.setConfig({\r
                width: Ext.os.is.Phone ? 220 : 250,\r
                height: Ext.os.is.Phone ? '100%' : 300\r
            });\r
        }\r
\r
        navigation.show();\r
        \r
        if (navigationButton) {\r
            navigationButton.setHidden(docked);\r
        }\r
    },\r
\r
    orientate: function (orientation) {\r
        var docked = Ext.os.deviceType !== 'Phone' && orientation === "landscape";\r
        this.setNavigationDocked(docked);\r
    },\r
\r
    applyMainRegion: function (mainRegion, oldMainRegion) {\r
        return Ext.factory(mainRegion, "Ext.Panel", oldMainRegion);\r
    },\r
\r
    updateMainRegion: function (mainRegion, oldMainRegion) {\r
        if (oldMainRegion) {\r
            this.remove(oldMainRegion);\r
        }\r
        if (mainRegion) {\r
            this.add(mainRegion);\r
        }\r
    },\r
\r
    updateChartView: function (chartView, oldChartView) {\r
        if (oldChartView) {\r
            this.getMainRegion().add(oldChartView);\r
        }\r
        if (chartView) {\r
            this.getMainRegion().insert(1, chartView);\r
        }\r
    },\r
\r
    applyLaunchScreen: function (launchScreen, oldLaunchScreen) {\r
        return Ext.factory(launchScreen, "Ext.Panel", oldLaunchScreen);\r
    },\r
\r
    updateLaunchScreen: function (launchScreen, oldLaunchScreen) {\r
        if (oldLaunchScreen) {\r
            this.getMainRegion().remove(oldLaunchScreen);\r
        }\r
        if (launchScreen) {\r
            this.getMainRegion().add(launchScreen);\r
        }\r
    },\r
\r
    applySheet: function (sheet, currentSheetInstance) {\r
        return Ext.factory(sheet, "Ext.Sheet", currentSheetInstance);\r
    },\r
\r
    updateSheet: function (sheet, oldSheet) {\r
        if (oldSheet) {\r
            Ext.Viewport.remove(oldSheet);\r
        }\r
        if (sheet) {\r
            Ext.Viewport.add(sheet);\r
        }\r
    },\r
\r
    applyNavigation: function (navigation, currentNavigationInstance) {\r
        return Ext.factory(navigation, "EnergyApp.view.Navigation", currentNavigationInstance);\r
    },\r
\r
    updateNavigation: function (navigation, currentNavigationInstance) {\r
        if (currentNavigationInstance) {\r
            this.remove(currentNavigationInstance);\r
        }\r
        if (navigation) {\r
            this.add(navigation);\r
        }\r
    },\r
\r
    applyNavigationButton: function (navigationButton, currentNavigationButtonInstance) {\r
\r
        navigationButton = Ext.factory(navigationButton, "Ext.Button", currentNavigationButtonInstance);\r
        return navigationButton;\r
    },\r
\r
    updateNavigationButton: function (navigationButton, currentNavigationButtonInstance) {\r
        if (currentNavigationButtonInstance) {\r
            this.getToolbar().remove(currentNavigationButtonInstance);\r
        }\r
        if (navigationButton) {\r
            this.getToolbar().add(navigationButton);\r
        }\r
    },\r
\r
    updateTitle: function (title) {\r
        if (this.getToolbar()) {\r
            this.getToolbar().setTitle(title);\r
        }\r
    },\r
\r
    applyToolbar: function (toolbar, currentToolbarInstance) {\r
        toolbar = Ext.factory(toolbar, "Ext.TitleBar", currentToolbarInstance);\r
        return toolbar;\r
    },\r
\r
    updateToolbar: function (toolbar, oldToolbar) {\r
        if (oldToolbar) {\r
            this.getMainRegion().remove(oldToolbar);\r
        }\r
        if (toolbar) {\r
            this.getMainRegion().add(toolbar);\r
        }\r
    }\r
});\r