Reusable Action in Ext JS MVC

1
votes

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 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)

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

And in my context menu

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

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

     this.callParent(arguments);

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

Can anyone point out what I am doing wrong?

Thanks in advance,

t

2
extjsextjs-mvc

2 Answers

2
votes

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

As per Ext.Action constructor

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

You must supply config not to get config is undefined exception in the second line (precisely in config.itemId part).

Updating your code as var editUser = new App.action.EditAction({}); should help(passing new empty object as config). Surely, you could add some properties to the config object too.