Action columns and controllers

[dgotty]

Has anyone tried to listen to an actioncolumn's handler inside of their controller? I'm trying to stay consistent with the MVC structure but that means in order to use the action column I need to use the handler inside of my view.

In order to work around it I'm using the grid's itemclick event and checking to see if the user is clicking on the icon or not but it seems really hacky.

Any insight is greatly appreciated.

[existdissolve]

Has anyone tried to listen to an actioncolumn's handler inside of their controller? I'm trying to stay consistent with the MVC structure but that means in order to use the action column I need to use the handler inside of my view.

In order to work around it I'm using the grid's itemclick event and checking to see if the user is clicking on the icon or not but it seems really hacky.

Any insight is greatly appreciated.

Have you tried something like:

this.control({
   'mygrid actioncolumn': {
      click: function( grid, view, recordIndex, cellIndex, item, e ) {
          // do whatever here
      }
   }
}); 

[slemmon]

A click listener on the actioncolumn will fire if you click anywhere in the column.
One option would be to have the handler fire an application level event and have a controller (or controllers) handle it.

http://jsfiddle.net/slemmon/9ZfvP/

example

Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
    data:[
        {firstname:"Michael", lastname:"Scott"},
        {firstname:"Dwight", lastname:"Schrute"},
        {firstname:"Jim", lastname:"Halpert"},
        {firstname:"Kevin", lastname:"Malone"},
        {firstname:"Angela", lastname:"Martin"}
    ]
});


var p = Ext.create('Ext.grid.Panel', {
    title: 'Action Column Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        {text: 'First Name',  dataIndex:'firstname'},
        {text: 'Last Name',  dataIndex:'lastname'},
        {
            xtype:'actioncolumn',
            width:50,
            items: [{
                icon: 'http://raymanpc.com/wiki/images/thumb/2/2f/GreenTick.png/20px-GreenTick.png',
                handler: function(v, row, col, item, e, rec) {
                    MyApp.app.fireEvent('actionclick', v, row, col, item, e, rec);
                }
            }]
        }
    ],
    width: 250
});






Ext.define('MyApp.controller.Users', {
    extend: 'Ext.app.Controller',


    init: function() {
        var me = this;
        me.application.on('actionclick', me.onActioncolumnClick);
    }
    
    , onActioncolumnClick: function (v, row, col, item, e, rec) {
        console.log(rec);
    }
});


        
        
Ext.application({
    name: 'MyApp',
    
    controllers: ['Users'],
    
    init: function () {
        MyApp.app = this;
    },
    
    launch: function() {
        this.addEvents('actionclick');
        
        Ext.create('Ext.container.Viewport', {
            layout: 'fit'
            ,items: [p]
        });
    }
});

[existdissolve]

Ah, yes, good point. I've always disliked action column, precisely because it makes the regular patterns of the controller approach harder to implement.

One thing I've also done in the past is to simply capture the column click (as in my previous post), and then switch on the target (only meaningful if you have multiple columns...otherwise, no big deal). A little ugly, yes, but it does allow you to not have to slap a handler on the actioncolumn item.

[dgotty]

Thanks guys.

Looks like there isn't really a good solution for this problem. Maybe it will be adjusted in future updates. As of now I'm just going to continue listening to the grid's itemclick event and making sure the user is clicking on the actioncolumn.

[existdissolve]

But if you target the action column, you will at least know that the click is within the domain of the actioncolumn. Even if you still need to switch on the target, at least you'd only be doing it for legitimate action column clicks, and not for every click on the grid.