在 Sencha Architect 中将 Ext.Menu 添加到视口答案

【问题标题】：Adding Ext.Menu to the viewport in Sencha Architect在 Sencha Architect 中将 Ext.Menu 添加到视口
【发布时间】：2014-06-10 09:53:57
【问题描述】：

我正在 Sencha Architect 3 中制作一个基本应用程序，并尝试添加一个触摸番茄样式的菜单按钮http://docs.sencha.com/touch/2.3.0/touch-build/examples/touchtomatoes/index.html

在 Touch Tomatoes 项目中添加菜单的代码是在 Sencha Touch 项目的 app.js 文件中添加的，如下所示，但我无法弄清楚如何在 Sencha Architect 中执行此操作，因为它说每次保存项目时都会覆盖 app.js 文件

Ext.应用程序（{ 名称：'TouchTomatoes'，

    requires: ['Ext.device.Storage','Ext.Menu', 'TouchTomatoes.components.MenuButton'],
    controllers: ['TouchTomatoes.controller.Main'],
    views: ['TouchTomatoes.view.Main', 'TouchTomatoes.view.WelcomeOverlay'],

    launch: function() {
        Ext.getBody().removeCls('loading');
        Ext.create('TouchTomatoes.view.Main');

        if (Ext.device.Storage.getItem('isFirstTime') !== "false") {
            Ext.device.Storage.setItem('isFirstTime', false);

            var overlay = Ext.create('TouchTomatoes.view.WelcomeOverlay');
            Ext.Viewport.add(overlay);
            overlay.show();
        }

        var menu = Ext.create("Ext.Menu", {
            defaults: {
                xtype: "menubutton"
            },
            width: '80%',
            scrollable: 'vertical',
            items: [
                {
                    text: 'Opening',
                    iconCls: 'time',
                    menu:"opening"
                },
                {
                    text: 'Theatres',
                    iconCls: 'locate',
                    menu: "theatres"
                },
                {
                    text: 'Upcoming',
                    iconCls: 'team',
                    menu:"upcoming"
                },
                {
                    text: 'Top',
                    iconCls: 'bank',
                    menu:'top'
                },
                {
                    text: 'Search',
                    iconCls: 'search',
                    menu:"search"
                }
            ]
        });

        Ext.Viewport.setMenu(menu, {
            side: 'left',
            reveal: true
        });
    }
});

【问题讨论】：

标签： extjs sencha-touch sencha-architect

【解决方案1】：

您已经定义了启动，因此只需将您的两个语句粘贴到架构师中即可。

在建筑师中，

在检查器中点击Application
单击配置窗格中的 launch 操作以在编辑器中显示它（或者，如果您没有定义启动，请单击配置窗格中启动旁边的 + 图标添加它。）

将您的代码粘贴到覆盖代码下方的编辑器中：

var menu = Ext.create("Ext.Menu", {
defaults: {
        xtype: "menubutton"
    },
    width: '80%',
    scrollable: 'vertical',
    items: [
        {
            text: 'Opening',
            iconCls: 'time',
            menu:"opening"
        },
        {
            text: 'Theatres',
            iconCls: 'locate',
            menu: "theatres"
        },
        {
            text: 'Upcoming',
            iconCls: 'team',
            menu:"upcoming"
        },
        {
            text: 'Top',
            iconCls: 'bank',
            menu:'top'
        },
        {
            text: 'Search',
            iconCls: 'search',
            menu:"search"
        }
    ]
});

Ext.Viewport.setMenu(menu, {
    side: 'left',
    reveal: true
});

您最终会得到与上面列出的完全相同的代码，并且它不会被覆盖，因为它是应用配置的一部分。

请注意，由于您包含“菜单按钮”的 xtype，因此您必须在类级别创建一个按钮并为其指定“菜单按钮”的 userAlias，否则应用程序将大致抛出错误说明, "我无法使用 xtype.menubutton 创建小部件。"

【讨论】：