add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / modern / src / view / Menus.js

/**\r
 * Demonstrates the {@link Ext.Menu} component\r
 */\r
Ext.define('KitchenSink.view.Menus', {\r
    extend: 'Ext.Container',\r
    requires: ['Ext.Menu'],\r
\r
    config: {\r
        padding: 20,\r
        scrollable: true,\r
        defaults: {\r
            xtype : 'button',\r
            cls   : 'demobtn',\r
            margin: '10 0'\r
        },\r
        items: [\r
            {\r
                xtype: 'component',\r
                styleHtmlContent: true,\r
                html: [\r
                    '<b>Ext.Menu</b> is a new component in Sencha Touch 2.3 which allows you to easily display sliding',\r
                    'menus from any side of the screen.<br /><br />You can show the menus by either tapping the buttons below,',\r
                    'or by swiping from the edge of the screen.'\r
                ].join('')\r
            },\r
            {\r
                text: 'Toggle left menu (reveal)',\r
                handler: function() {\r
                    Ext.Viewport.toggleMenu('left');\r
                }\r
            },\r
            {\r
                text: 'Toggle right menu (reveal)',\r
                handler: function() {\r
                    Ext.Viewport.toggleMenu('right');\r
                }\r
            },\r
            {\r
                text: 'Toggle top menu (cover)',\r
                handler: function() {\r
                    Ext.Viewport.toggleMenu('top');\r
                }\r
            },\r
            {\r
                text: 'Toggle bottom menu (slide)',\r
                handler: function() {\r
                    Ext.Viewport.toggleMenu('bottom');\r
                }\r
            }\r
        ]\r
    },\r
\r
    updateHidden: function(hidden) {\r
        this.callParent(arguments);\r
\r
        if (hidden) {\r
            Ext.Viewport.removeMenu('left');\r
            Ext.Viewport.removeMenu('right');\r
            Ext.Viewport.removeMenu('bottom');\r
            Ext.Viewport.removeMenu('top');\r
        } else {\r
            Ext.Viewport.setMenu(this.getMenuCfg('top'), {\r
                side: 'top'\r
            });\r
\r
            Ext.Viewport.setMenu(this.getMenuCfg('bottom'), {\r
                side: 'bottom',\r
                cover: false\r
            });\r
\r
            Ext.Viewport.setMenu(this.getMenuCfg('left'), {\r
                side: 'left',\r
                reveal: true\r
            });\r
\r
            Ext.Viewport.setMenu(this.getMenuCfg('right'), {\r
                side: 'right',\r
                reveal: true\r
            });\r
        }\r
    },\r
\r
    getMenuCfg: function(side) {\r
        return {\r
            items: [{\r
                text: 'Settings',\r
                iconCls: 'x-fa fa-gear',\r
                scope: this,\r
                handler: function() {\r
                    Ext.Viewport.hideMenu(side);\r
                }\r
            }, {\r
                text: 'New Item',\r
                iconCls: 'x-fa fa-pencil',\r
                scope: this,\r
                handler: function() {\r
                    Ext.Viewport.hideMenu(side);\r
                }\r
            }, {\r
                xtype: 'button',\r
                text: 'Star',\r
                iconCls: 'x-fa fa-star',\r
                scope: this,\r
                handler: function() {\r
                    Ext.Viewport.hideMenu(side);\r
                }\r
            }]\r
        };\r
    }\r
});\r