Question

我正在使用mvc架构方法来构建一个ui。我有一个我想重复使用的菜单，想知道以下是否可能：

文件结构：

app/
--->app.js
--->view/
--------->viewport.js
--------->Toolbar.js
--------->SaveMenu.js

viewport.js：

Ext.define('MyApp.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',

requires: [
    'MyApp.view.Toolbar',
    'MyApp.view.SaveMenu',
],

initComponent: function () {
    this.items = {
        dockedItems: [
            {
                dock    : 'top',
                xtype   : 'myapptoolbar',
                height  : 40,
            }
        ]
...
// more config, but this works now.

Toolbar.js

Ext.define ('Myapp.view.Toolbar', {
    extend : 'Ext.toolbar.Toolbar',
    alias : 'widget.myapptoolbar',
    items : [
        {
            text : 'Save',
            // The following doesn't work, is there another way to achieve this?
            menu : 'myappsavemenu',  
        }
    ]
});

SaveMenu.js

Ext.define ('Myapp.view.SaveMenu', {
    extend : 'Ext.menu.Menu',
    alias : 'widget.myappsavemenu',
    items : [
        {
            text : 'Save as...',
        }
    ]
});

是否可以在其他视图中重用以前定义的视图组件，如果是这样，我该怎么做呢？

编辑 - 忘记使用此配置时引发的错误：

Uncaught TypeError: Cannot set property 'ownerCt' of undefined

Answer 1

是的，这是完全合理的，但菜单属性应该是菜单实例，菜单ID或对象配置。

我会选择：

menu: {xtype: 'myappsavemenu'},

ExtJS文档可在线获取。按钮的菜单配置在此处说明：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-cfg-menu

一般来说，我只是熟悉Ext。

另请注意，我现在删除的第一个方法将在所有myapptoolbars中为您提供相同的菜单实例。根据你正在做的事情，这可能是也可能不是一件可怕的事情。我试图远离它，因为在引入问题时很难调试。

使用ExtJS4 MVC在其他视图中重用扩展组件

1 个答案: