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

Posted 2023-02-26

【中文标题】在 Sencha Architect 中将 Ext.Menu 添加到视口

【英文标题】：Adding Ext.Menu to the viewport in Sencha Architect

【发布时间】：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
        );
    
);

【参考方案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 创建小部件。"