Question

我有一个带有工具栏和上下文菜单的网格面板。工具栏有一个编辑按钮，上下文菜单有一个编辑菜单项。两者共享相同的属性（文本，图标和处理程序）

Ext有一个名为Action的东西，它可以在组件之间共享功能等，但直到现在我还没有成功让它在MVC架构中工作（我在4.0中使用新的MVC架构）

我的Action类看起来像这样：

Ext.define( 'App.action.EditAction', {
    extend: 'Ext.Action',
    text: 'Edit',
    handler: function()
    {
        Ext.Msg.alert('Click', 'You did something.');
    },
    iconCls: 'icon-edit-user' ,
});

在我的上下文菜单中

requires: ['App.action.EditAction'],
initComponent: function()
{
    var editUser = new App.action.EditAction();

    this.items = [
        editUser,
        {
            // More menuitems
        }
        ...
     ];

     this.callParent(arguments);

运行代码时，我在控制台中得到“config is undefined”。

有谁可以指出我做错了什么？

提前致谢，

吨

Answer 1

将空配置传递给构造函数将避免错误，但稍后会产生不必要的后果，因为不幸的是，基类（Ext.Action）稍后会依赖this.initialConfig。例如，如果您致电editUser.getText()，则会返回undefined而不是预期的'Edit'。

另一种方法是覆盖构造函数以允许无参数调用并应用重写的配置：

Ext.define( 'App.action.EditAction', {
    extend: 'Ext.Action',
    text: 'Edit',
    constructor: function(config) 
    {
        config = Ext.applyIf(config || {}, this);
        this.callParent([config]);
    },
    handler: function()
    {
        Ext.Msg.alert('Click', 'You did something.');
    },
    iconCls: 'icon-edit-user' ,
});

Answer 2

根据Ext.Action构造函数

constructor : function(config){
    this.initialConfig = config;
    this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
    this.items = [];
}

您必须提供配置，以便在第二行（恰好在config is undefined部分中）获取config.itemId例外。

将代码更新为var editUser = new App.action.EditAction({});应该会有所帮助（将新的空对象作为配置传递）。当然，您也可以为配置对象添加一些属性。

Ext JS MVC中的可重用动作

2 个答案: