Ext JS MVC中的可重用动作 [英] Reusable Action in Ext JS MVC

问题描述

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

I have a Grid Panel with a toolbar and an context menu. The toolbar has a edit button and the context menu has a edit menu item. Both shares the same properties (text, icon and handler)

Ext有一个叫做Action的东西，它使得在组件之间共享功能等成为可能，但是直到现在我还没有成功地使其在MVC架构中工作 (我正在4.0中使用新的MVC架构)

Ext has something called Action which makes it possible to share functionality etc. between components, but til now I have had no success getting it to work in the MVC architecture (I am using the new MVC architecture in 4.0)

我的Action类如下:

My Action class looks like this:

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".

When running the code I get "config is undefined" in the console.

有人可以指出我在做什么错吗?

Can anyone point out what I am doing wrong?

预先感谢

t

推荐答案

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

Passing an empty config to your constructor will avoid the error, but have unwanted consequences later because, unfortunately, the base class (Ext.Action) relies on this.initialConfig later on. For example, if you called editUser.getText() it would return undefined instead of the expected 'Edit'.

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

Another approach is to override your constructor to allow a no-arg invocation and apply your overridden configuration:

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

这篇关于Ext JS MVC中的可重用动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！