Extjs 在Sencha Architect中将外部菜单添加到视口

我正在Sencha Architect 3中制作一个基本应用程序，并尝试添加一个触摸式菜单按钮

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

外部应用程序({ 名称：'触摸番茄'

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

---

您已经定义了启动，所以只需将两条语句粘贴到architect中即可

在建筑师方面

• 单击inspector中的应用程序
• 单击配置窗格中的launch操作将其显示在编辑器中（或者，如果未定义启动，请单击配置窗格中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'menubutton'，因此您必须在类级别创建一个按钮，并为其提供一个userAlias'menubutton'，否则应用程序将抛出一个错误，大致说明“我无法使用xtype.menubutton创建小部件。”