You found a bug! We've classified it as EXTJS-6097 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    18
    Vote Rating
    0
    jchristen is on a distinguished road

      0  

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

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


    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:

    Code:
    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
      Code:
      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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,650
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member rpiwonka's Avatar
    Join Date
    Jul 2007
    Posts
    29
    Vote Rating
    0
    rpiwonka is on a distinguished road

      0  

    Default Does initComponent fire more than once?

    Does initComponent fire more than once?


    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.

  4. #4
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    18
    Vote Rating
    0
    jchristen is on a distinguished road

      0  

    Default


    Quote Originally Posted by rpiwonka View Post
    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.