How to perform View-Controller separation when using an “actioncolumn” (Ext.grid.column.Action)

Question

In ExtJS 4, I have a grid that contains an action column. Whenever that action is triggered, I want to execute \"my action\".

Without MVC, this would look like this:

Answer 1

This post explains an even simpler method than the accepted answer, if you only happen to have one type of actioncolumn item in your grid:

http://mitchellsimoens.com/actioncolumn-and-mvc/

Basically: just listen for the actioncolumn's click event in your controller. However, this doesn't work if you need to distinguish between multiple actioncolumn types.

Answer 2

The problem is not in actioncolumn but in its items which are not ExtJs Widgets. This items are simple images. That's why we cannot assign handlers in control in such a way:

this.control({
    'mygrid actioncolumn button[type=edit]' : this.onEdit

This way, however, would be the best one.

Unfortunately this way is impossible. But There is another way, which is almost as clean as the preferred one: make actioncolumn handler to fire grid's custom event (created by you):

// view
{
    xtype: 'actioncolumn',
    items: [{
        icon: 'http://cdn.sencha.io/ext-4.1.0-gpl/examples/shared/icons/fam/cog_edit.png',
        tooltip: 'Edit',
        handler: function(grid, rowIndex, colIndex) {
            // fire custom event "itemeditbuttonclick"
            this.up('grid').fireEvent('itemeditbuttonclick', grid, rowIndex, colIndex);
        }},

// controller
init: function() {
    this.control({
        'viewport > testpanel': {
            itemeditbuttonclick: this.onEdit,
            itemdeletebuttonclick: this.onDelete
        }
    });
},

Example

Here is demo.