[4.1.0] Some Ext.grid.Panel events aren't thrown if detected as lockable

[jchristen]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.0

Browser versions tested against:

• Chrome 18
• FF11 (firebug 1.9.1 installed)

Description:

• If you create an Ext.grid.Panel with "enableLocking: true" or some locked columns, some events like "viewready" aren't thrown.
• We have same problem with custom event in extended component.

Steps to reproduce the problem:

• Copy Grid with Locking example
• Add "viewready" listener with alert message

The result that was expected:

• Alert message should be shown when rendered.

The result that occurs instead:

• No alert message (so no "viewready" event thrown)

Test Case:

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

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,
        columnLines: true,
        columns: [{
            text     : 'Company<br>Name', // Two line header! Test header height synchronization!
            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
        },
        listeners: {viewready: function(){alert('viewready');}}
    });
});

If you remove "locked : true," from first column, alert message is shown after rendering.

HELPFUL INFORMATION

Debugging already done:

• "cellclick" and "celldblclick" events have same problem, but "selectionchanged" or "beforeitemcontextmenu" works fine.
• We have same problem with a custom event
  

  Ext.define('Ext.ux.wx.RowPanel', {
      extend: 'Ext.grid.Panel',
  ...
      initComponent: function() {
          var me = this;
          me.callParent(arguments);
          me.addEvents(
              /**
               * @event focusedrowchanged
               * Fires after row receives focus
               * @param {Object} this
               * ...
               */
              'focusedrowchanged');
      }
  ...
      myFunction: function() {
        this.fireEvent('focusedrowchanged', this, ...);
      }
  }
  
  var myGrid = Ext.create('Ext.ux.wx.RowPanel', {enableLocking: true});
  myGrid.on('focusedrowchanged', ...);

  "focusedrowchanged" seems to be thrown in an instance of Ext.ux.wx.RowPanel which is a child copy of myGrid.
  myGrid.hasListeners['focusedrowchanged'] -> 1
  but in fireEvent :
  me.hasListeners[eventName] -> undefined
  me.ownerCt.hasListeners[eventName] -> 1

Possible fix:

• None

Additional CSS used:

• only default ext-all.css

Operating System:

• Win7 Enterprise

[mitchellsimoens]

Thanks for the report.

[rpiwonka]

I have a similar situation where a custom sub-class of grid with locking columns will actually fire initcomponent 2-3 times only when there are locked columns.

Can you check if that is happening here?

If so, that may help track down the problem with the events.

[jchristen]

I have a similar situation where a custom sub-class of grid with locking columns will actually fire initcomponent 2-3 times only when there are locked columns.

Can you check if that is happening here?

If so, that may help track down the problem with the events.

If grid has locking columns, initComponent is called 3 times for Ext.grid.Panel (Ext.panel.Table) and twice for Ext.grid.View (Ext.view.Table), but "This" is different each time. It's normal because a lockable grid actually contains two grids :

• one for locked columns (including a view without horizontal scroll)
• one for normal columns (including a view with horizontal scroll)

So we have 3 instances of Ext.grid.Panel and 2 instances of Ext.grid.View for a single lockable grid.