Results 1 to 6 of 6

Thread: Action columns and controllers

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    42
    Vote Rating
    6
      0  

    Default 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
    32
    Vote Rating
    89
      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 - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Answers
    501
    Vote Rating
    257
      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
    32
    Vote Rating
    89
      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 Premium User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    42
    Vote Rating
    6
      0  

    Default 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
    32
    Vote Rating
    89
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •