1. #1
    Sencha User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    30
    Vote Rating
    3
    dgotty is on a distinguished road

      0  

    Default Unanswered: Action columns and controllers

    Unanswered: Action columns and controllers


    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.

  2. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Answers
    31
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    Quote Originally Posted by dgotty View Post
    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:

    PHP Code:
    this.control({
       
    'mygrid actioncolumn': {
          
    click: function( gridviewrecordIndexcellIndexitem) {
              
    // do whatever here
          
    }
       }
    }); 

  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,417
    Answers
    435
    Vote Rating
    201
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    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
    Code:
    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]
            });
        }
    });

  4. #4
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Answers
    31
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    30
    Vote Rating
    3
    dgotty is on a distinguished road

      0  

    Default Thanks

    Thanks


    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.

  6. #6
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Answers
    31
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    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.