Ext JS MVC 中的可重用操作

Posted 2023-02-26

【中文标题】Ext JS MVC 中的可重用操作

【英文标题】：Reusable Action in Ext JS MVC

【发布时间】：2011-10-06 16:45:30

【问题描述】：

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

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”。

谁能指出我做错了什么？

提前致谢，

t

【参考方案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' ,
);

【参考方案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(); 应该会有所帮助（将新的空对象作为配置传递）。 当然，您也可以向配置对象添加一些属性。