You found a bug! We've classified it as EXTJS-15606 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jul 2008
    Location
    Czech republic
    Posts
    58
    Vote Rating
    1
    ondra.cz is on a distinguished road

      1  

    Default [4.2.3] ActionColumn click event in controller not working

    [4.2.3] ActionColumn click event in controller not working


    Ext version tested:
    • Ext 4.2.3 rev 1477
    Browser versions tested against:
    • FF 32 (firebug 2.0.4 installed)
    • Chrome 37.0.2062.124 m
    Description:
    • Click event for grid action column in MVC architecture is probably not fired. It works with Ext 4.2.2 and older.
    Code:

    Controller:
    Code:
    Ext.define('Module.admin.controller.Management', {
        extend : 'Ext.ux.desktop.Controller',
    ...
        init : function(application, desktopController) {
            this.control({
                'admin_management_users actioncolumn' : {
                    click : function() {
                        console.log('click');
                    }
                }
            });
    
            this.callParent(arguments);
        },
    
        onActionClick : function(view, cell, rowIndex, colIndex, e, rec, row) {
    // do something
        }
    });
    View:
    Code:
    Ext.define('Module.admin.view.management.Users', {
        extend : 'Ext.grid.Panel',
    
        alias : 'widget.admin_management_users',
    
        store : 'Module.core.store.Users',
    
        initComponent : function() {
            Ext.apply(this, {
                columns : [{
                        menuDisabled : true,
                        sortable : false,
                        xtype : 'actioncolumn',
                        width : 40,
                        items : [{
                                iconCls : 'icon-plugin'
                            }, {
                                iconCls : 'icon-user-go'
                        }]
                }]
            });
    
            this.callParent();
        }
    });
    When I click on action column but outside of icons, onActionClick is called. When I click directly to any of these icons, nothing happens.

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    4,987
    Vote Rating
    94
    Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice

      0  

    Default


    Thanks for the report. Can you please post a test case which reproduces the issue?
    https://fiddle.sencha.com/#home


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Jul 2008
    Location
    Czech republic
    Posts
    58
    Vote Rating
    1
    ondra.cz is on a distinguished road

      0  

    Default


    I had no luck to create working MVC app in fiddle. But it is easy to create example by modificion of official example http://docs.sencha.com/extjs/4.2.3/e...le/simple.html.

    app/controller/Users.js - rewrite init function
    Code:
        init: function() {
            this.control({
                'viewport > userlist': {
                    itemdblclick: this.editUser
                },
                'useredit button[action=save]': {
                    click: this.updateUser
                },
                'userlist actioncolumn' : {
                    click : function() {
                        alert('click');
                    }
                },
            });
        },
    app/view/user/List.js - rewrite columns block
    Code:
        columns: [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1},
            {xtype : 'actioncolumn', width : 20, items : [{iconCls : 'icon'}]}
        ]
    simple.html - add style
    Code:
        <style type="text/css" media="screen">
            .icon {background-image: url(icon.gif) !important;}
        </style>
    and create some icon 16x16px icon called icon.gif in this folder.

    When you click on the icon, nothing happen. When you click for example right above the icon, alert will be called.

    I also will be very gratefull if you tell, what I did wrong on fiddle - https://fiddle.sencha.com/#fiddle/c1o

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Location
    Pennsylvania
    Posts
    11
    Vote Rating
    0
    jsheely is on a distinguished road

      0  

    Default


    I fixed this by overriding the processEvent in the Ext.grid.Column.Action

    Note that the signature is slightly different then the original actioncolumn click (view, cell, row, col, e) that worked in 4.2.2. However I found that this signature was actually better as it contains the record which the previous one did not and you had to do view.getStore().getAt(row)

    Code:
    Ext.define('Custom.grid.column.Action',{
    override:'Ext.grid.column.Action',
        processEvent : function(type, view, cell, recordIndex, cellIndex, e, record, row){
            var me = this,
                target = e.getTarget(),
                match,
                item, fn,
                key = (type === 'keydown' && e.getKey()),
                disabled;
    
    
            // Don't process mousedown events anymore!
            if (type === 'mousedown') {
                return false;
            }
    
    
            // If the target was not within a cell (ie it's a keydown event from the View), then
            // rely on the selection data injected by View.processUIEvent to grab the
            // first action icon from the selected cell.
            if (key && !Ext.fly(target).findParent(view.getCellSelector())) {
                target = Ext.fly(cell).down('.' + Ext.baseCSSPrefix + 'action-col-icon', true);
            }
    
    
            // NOTE: The statement below tests the truthiness of an assignment.
            if (target && (match = target.className.match(me.actionIdRe))) {
                item = me.items[parseInt(match[1], 10)];
                disabled = item.disabled || (item.isDisabled ? item.isDisabled.call(item.scope || me.origScope || me, view, recordIndex, cellIndex, item, record) : false);
                if (item && !disabled) {
                    if (type == 'click' || (key == e.ENTER || key == e.SPACE)) {
                        fn = item.handler || me.handler;
                        if (fn) {
                            fn.call(item.scope || me.origScope || me, view, recordIndex, cellIndex, item, e, record, row);
                        }else {
                            //JS - Added custom event to fire click event if no handler is present.
                            me.fireEvent('click', view, recordIndex, cellIndex, item, e, record, row);
                        }
    
    
                        // The default is to stop the event from propagating (thus preventing the selection model from
                        // selecting and focusing the grid row). See EXTJSIV-11177.
                        if (item.stopSelection !== false) {
                            return false;
                        }
                    }
                }
            }
    
    
            return me.callParent(arguments);
        }
    
    
    
    
    });

  5. #5
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    4,987
    Vote Rating
    94
    Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice

      0  

    Default


    Thanks for sharing your override with the community.

    I've linked this thread to the bug ticket tracking this issue (EXTJS-15606).


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

Thread Participants: 2

Tags for this Thread