Question

我正在使用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.application（{ 名称：＆＃39; TouchTomatoes＆＃39;，

    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
        });
    }
});

Answer 1

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

在建筑师中，

点击检查员

应用

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

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

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的“menubutton”，＆＃39;您必须在班级创建一个按钮，并为其提供一个“男人”的用户名，＆＃39;或者应用程序会抛出错误，粗略地说，＆＃34;我无法使用xtype.menubutton创建小部件。＆＃34;

将Ext.Menu添加到Sencha Architect中的视口

1 个答案: