add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / modern / src / controller / phone / Main.js

/**\r
 * @class KitchenSink.controller.phone.Main\r
 * @extends KitchenSink.controller.Main\r
 *\r
 * This is the Main controller subclass for the 'phone' profile. Most of the functionality required for this controller\r
 * is provided by the KitchenSink.controller.Main superclass, but we do need to add a couple of refs and control\r
 * statements to provide a slightly different behavior for the phone.\r
 *\r
 * The Main superclass provides a couple of capabilities that we use here. Firstly it sets up a listener on the main\r
 * navigation NestedList and redirects to the appropriate url for each view. For example, tapping on the 'Forms' item\r
 * in the list will redirect to the url 'demos/forms'.\r
 *\r
 * Secondly, it sets up a route that listens for urls in the form above and calls the controller's showView function\r
 * whenever one is detected. The showView function then just shows the appropriate view on the screen.\r
 *\r
 */\r
Ext.define('KitchenSink.controller.phone.Main', {\r
    extend: 'KitchenSink.controller.Main',\r
\r
    config: {\r
        refs: {\r
            touchEvents: 'touchevents',\r
            consoleButton: 'button[action=showConsole]'\r
        },\r
\r
        control: {\r
            nav: {\r
                back: 'onBackTap'\r
            },\r
            consoleButton: {\r
                tap: 'showTouchEventConsole'\r
            }\r
        }\r
    },\r
\r
    /**\r
     * This is called whenever the user taps on an item in the main navigation NestedList\r
     */\r
    onNavTap: function(nestedList, list, index, target, record, e) {\r
        if (record.isLeaf()) {\r
            this.redirectTo(record);\r
        } else {\r
            this.redirectTo('menu/' + record.get('id'));\r
        }\r
    },\r
\r
    onNavLeafTap: function(nestedList, list, index, target, record, e) {\r
        this.showView(record, true);\r
    },\r
\r
    /**\r
     * In the Phone Profile only we support routing through to a menu page (urls like "menu/ui"). This function\r
     * just sets everything up to show that menu\r
     */\r
    showMenuById: function(id) {\r
        var nav  = this.getNav(),\r
            store = nav.getStore(),\r
            item = (!id || id == 'root') ? store.getRoot() : store.getNodeById(id);\r
\r
        if (item) {\r
            nav.goToNode(item);\r
            this.getToolbar().setTitle(item.get('text'));\r
            this.getSourceButton().setHidden(true);\r
            this.getSourceOverlay().setHidden(true);\r
            this.hideSheets();\r
        }\r
    },\r
\r
    /**\r
     * For a given Demo model instance, shows the appropriate view. This is the endpoint for all routes matching\r
     * 'demo/:id', so is called automatically whenever the user navigates back or forward between demos.\r
     * @param {KitchenSink.model.Demo} item The Demo model instance for which we want to show a view\r
     */\r
    showView: function(item, direct) {\r
        if (this.isProfile(item)) {\r
            return;\r
        }\r
        \r
        var nav    = this.getNav(),\r
            title  = item.get('text'),\r
            view   = this.createView(item),\r
            layout = nav.getLayout(),\r
            anim   = item.get('animation'),\r
            initialAnim = layout.getAnimation(),\r
            newAnim;\r
\r
        if (nav.getDetailCard() !== view) {\r
            if (anim) {\r
                layout.setAnimation(anim);\r
                newAnim = layout.getAnimation();\r
            }\r
\r
            nav.setDetailCard(view);\r
            if (!direct) {\r
                nav.goToLeaf(item);\r
            }\r
\r
            if (newAnim) {\r
                newAnim.on('animationend', function() {\r
                    layout.setAnimation(initialAnim);\r
                }, this, { single: true });\r
            }\r
        }\r
\r
        this.getToolbar().setTitle(title);\r
        this.getSourceButton().setHidden(false);\r
    },\r
\r
    /**\r
     * This is called whenever the user hits the Back button on the main navigation NestedList. It hides the\r
     * "View Source" button as we do no want to see that when we are in the NestedList itself\r
     */\r
    onBackTap: function(nestedList, node) {\r
        //this means we just hit back out of a detail card\r
        if (node.isLeaf()) {\r
            this.getSourceButton().setHidden(true);\r
        }\r
\r
        this.redirectTo('menu/' + node.parentNode.get('id'));\r
    },\r
\r
    /**\r
     * This is called whenever the user hits the 'Console' button on the TouchEvents view. It just makes sure\r
     * that the view is showing the console card.\r
     */\r
    showTouchEventConsole: function(button) {\r
        this.getTouchEvents().showConsole();\r
    }\r
});