[Ext 4.1.1] Ext.grid.Panel - Some events are not working if locked columns are used

[rebel-l]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.1

Browser versions tested against:

• Chrome 21 (Windows)

DOCTYPE tested against:

• XHTML 1.0 STRICT

Description:

• If you register an event on Ext.grid.Panel (tested with "cellclick" [without any extension] and "filterupdate" [with Ext.ux.grid.FiltersFeature]), the event is not fired if a column is locked. It doesn't matter if you use .on() mehtod or use config listeners.

Steps to reproduce the problem:

• create Ext.grid.Panel and register a listener for "cellclick" event and lock a column via config
• click in a cell

The result that was expected:

• the event is fired

The result that occurs instead:

• nothing happens

Test Case:

 Ext.Loader.setConfig({    enabled: true
});


Ext.Loader.setPath("F4H", "lib");


Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'F4H.*'
]);


Ext.onReady(function() {
    Ext.QuickTips.init();


    // sample static data for the store
    var myData = [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
        ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
        ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
        ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
        ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
        ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
        ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
        ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
        ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
        ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
        ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
        ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
        ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
        ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
        ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
        ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
        ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
        ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
        ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
        ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
        ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
        ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
        ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
    ];


    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function change(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }


    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function pctChange(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }


    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });
    
    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        alias: 'mygrid',
    selType: 'checkboxmodel',          
        enableLocking: true,
        columnLines: true,
        columns: [{
            text     : 'Company',
            locked   : true,
            width    : 200,
            sortable : false,
            dataIndex: 'company',
        },{
            text     : 'Price',
            width    : 125,
            sortable : true,
            renderer : 'usMoney',
            dataIndex: 'price',
        },{
            text     : 'Change',
            width    : 125,
            sortable : true,
            renderer : change,
            dataIndex: 'change',
        },{
            text     : '% Change',
            width    : 125,
            sortable : true,
            renderer : pctChange,
            dataIndex: 'pctChange',
        },{
            text     : 'Last Updated',
            width    : 135,
            sortable : true,
            renderer : Ext.util.Format.dateRenderer('m/d/Y'),
            dataIndex: 'lastChange',
        }],
        height: 350,
        width: 600,
        title: 'Locking Grid Column',
        renderTo: Ext.getBody(),
        viewConfig: {
            stripeRows: true
        },

        // comment this if you want to test it with .on() method
        listeners: {
            cellclick: function(){
                alert( 'Cell click method registered by listener config' );
            }    
        }
    });
    
// uncomment this part to test with .on() method    
//    grid.on( 'cellclick', function(){
//        alert( 'Cell click registered by on() method' );
//    });
});

HELPFUL INFORMATION
Possible fix:

• I created a workaround:

Ext.define( 'Fixed.Panel', {
    extend: 'Ext.grid.Panel',
    bothCfgCopy: [            'invalidateScrollerOnRefresh',
            'hideHeaders',
            'enableColumnHide',
            'enableColumnMove',
            'enableColumnResize',
            'sortableColumns',
            'listeners',     // added this so that ExtJs is registering the listeners if injected by config
    ],
    
     normalCfgCopy: [         'verticalScroller', 
        'verticalScrollDock', 
        'verticalScrollerType', 
        'scroll'
    ],
    
   lockedCfgCopy: [ ],

    /// overridden to delegate events to locked/normal grid depending on the config above
    on: function( eventName, fn, scope, options ){
        // if lockedColumn feature is used, delegate listeners to normalGrid/lockedGrid
        if( this.lockable ){
            if( this.normalGrid && this._issetInCfgCopy( 'listeners', this.normalCfgCopy ) ){
                this.normalGrid.on( eventName, fn, scope, options );
            }
            
            if( this.lockedGrid && this._issetInCfgCopy( 'listeners', this.lockedCfgCopy ) ){
                this.lockedGrid.on( eventName, fn, scope, options );
            }
            
            return;
        }
        
        this.callParent( arguments );
    },
    
    /**
     * Returns true, if a config section is copied to special grid (locked or normal).
     * 
     * @param {string} configSection The name of the config section.
     * @param {Array} specialConfig The special config: this.normalCfgCopy or this.lockedCfgCopy
     * @return {Boolean}
     */
    _issetInCfgCopy: function( configSection, specialConfig ){
        var config = Ext.Array.merge( this.bothCfgCopy, specialConfig );
        var i, ln;
        
        for( i = 0, ln = config.length; i < ln; i++ ){
            if( config[i] === configSection ){
                return true;
            }
        }
        
        return false;
    }    
        
});

Additional CSS used:

• only default ext-all.css

Operating System:

• Windows 7

[mitchellsimoens]

Thanks for the report. Watch out for those trailing commas

[evant]

Dupe: http://www.sencha.com/forum/showthread.php?165284