Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-9224 in a recent build.
  1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    7
    Vote Rating
    2
    eldono is on a distinguished road

      0  

    Default [Extjs 4.2.0] RowExpander doesn't fire events

    [Extjs 4.2.0] RowExpander doesn't fire events


    REQUIRED INFORMATION Ext version tested:
    • Ext 4.2 rev 0
    Browser versions tested against:
    • Firefox 19
    DOCTYPE tested against:
    • doesn't matter
    Description:
    • The RowExpander plugin doesn't fire (through the grid view) the events of 'collapsebody' and 'expandbody' because the fireEvent checks if the event is in the list of firable events for the component.
    Steps to reproduce the problem:
    • Even the grid plugin examples is enough
    The result that was expected:
    • grid's view should fire 'collapsebody' and 'expandbody' events
    The result that occurs instead:
    • no event is fired
    Test Case:
    Code:
         
    Ext.define('Company', {
        extend : 'Ext.data.Model',
        fields : [
            {name : 'company'},
            {name : 'price', type : 'float'},
            {name : 'change', type : 'float'},
            {name : 'pctChange', type : 'float'},
            {name : 'lastChange', type : 'date', dateFormat : 'n/j h:ia'},
            {name : 'industry'},
            {name : 'desc'}
        ]
    });
    
    Ext.grid.dummyData = [
        ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],
        ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],
        ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],
        ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am', 'Finance'],
        ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am', 'Services'],
        ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am', 'Services'],
        ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am', 'Manufacturing'],
        ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am', 'Services'],
        ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am', 'Finance'],
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am', 'Manufacturing'],
        ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am', 'Manufacturing'],
        ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am', 'Manufacturing'],
        ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am', 'Automotive'],
        ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am', 'Computer'],
        ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am', 'Manufacturing'],
        ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am', 'Computer'],
        ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am', 'Computer'],
        ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am', 'Medical'],
        ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am', 'Finance'],
        ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am', 'Food'],
        ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am', 'Medical'],
        ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am', 'Computer'],
        ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am', 'Services', 'Medical'],
        ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am', 'Food'],
        ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am', 'Retail'],
        ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am', 'Manufacturing'],
        ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am', 'Computer'],
        ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am', 'Services'],
        ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am', 'Retail'],
        ['Walt Disney Company (The) (Holding Company)', 29.89, 0.24, 0.81, '9/1 12:00am', 'Services']
    ];
    
    // add in some dummy descriptions
    for (var i = 0; i < Ext.grid.dummyData.length; i++) {
        Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. ');
    }
    
    var getLocalStore = function () {
        return Ext.create('Ext.data.ArrayStore', {
            model : 'Company',
            data  : Ext.grid.dummyData
        });
    };
     var grid1 = Ext.create('Ext.grid.Panel', {
            store: getLocalStore(),
            columns: [
                {text: "Company", flex: 1, dataIndex: 'company'},
                {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {text: "Change", dataIndex: 'change'},
                {text: "% Change", dataIndex: 'pctChange'},
                {text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
            enableLocking: true,
            width: 600,
            height: 300,
            plugins: [{
                ptype: 'rowexpander',
                rowBodyTpl : new Ext.XTemplate(
                    '<p><b>Company:</b> {company}</p>',
                    '<p><b>Change:</b> {change:this.formatChange}</p><br>',
                    '<p><b>Summary:</b> {desc}</p>',
                {
                    formatChange: function(v){
                        var color = v >= 0 ? 'green' : 'red';
                        return '<span style="color: ' + color + ';">' + Ext.util.Format.usMoney(v) + '</span>';
                    }
                })
            }],
            collapsible: true,
            animCollapse: false,
            title: 'Expander Rows in a Collapsible Grid with lockable columns',
            iconCls: 'icon-grid',
            margin: '0 0 20 0',
            renderTo: Ext.getBody()
        });
    
         grid1.getView().addListener('expandbody', function(){
            console.log('Expand body fired - Unreachable code');
        });     
        grid1.getView().addListener('collapsebody', function(){
            console.log('Collapse body fired - Unreachable code');
        });

    HELPFUL INFORMATION

    Screenshot or Video:
    • Not provided
    Debugging already done:
    • debugged fire event method and discovered the problem
    Possible fix:
    • in the plugin "init" method it's enough to add something like
      Code:
         grid.getView().addEvents('expandbody', 'collapsebody');
    Additional CSS used:
    • doesn't matter
    Operating System:
    • doesn't matter

  2. #2
    Sencha User
    Join Date
    May 2010
    Posts
    7
    Vote Rating
    2
    eldono is on a distinguished road

      0  

    Default Workaround

    Workaround


    A possible workaround while this gets fixed is this:
    Code:
    Ext.override(Ext.grid.plugin.RowExpander, { // Override to fire collapsebody & expandbody
        init: function(grid) {
            this.callParent(arguments);
            grid.getView().addEvents('collapsebody', 'expandbody');
        }
    });

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    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! I have opened a bug in our bug tracker.

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    29
    Vote Rating
    0
    loumac is on a distinguished road

      0  

    Default 4.2.2

    4.2.2


    I just got 4.2.2 src and still cannot see event getting fired in console in firebug

    I have tried attaching event listener to the rowExpander

    this.rowExpander = new Ext.grid.plugin.RowExpander({
    ptype: 'rowexpander',
    locked: true,
    rowBodyTpl : this.template,
    listeners: {
    expandbody: function(rowNode,record, expandbody) {
    console.log("fire expand event");
    this.fireEvent('expandThisBody', rowNode,record,expandbody);
    }
    }
    });

    have also tried listening in the controller:
    'nameofextpanelgridwidget': {
    expandThisBody: this.DoMyExpandStuff
    }

    also tried listening to grid class itself

    this.on('expandbody', function(rowNode,record, expandbody) {
    console.log("fire expand event");
    this.fireEvent('expandThisBody', rowNode,record,expandbody);
    });

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    29
    Vote Rating
    0
    loumac is on a distinguished road

      0  

    Default enableLocking locked RowExpander

    enableLocking locked RowExpander


    I have locked columns:
    If I edit the RowExpander code in ext-all-dev.js I can get the event to fire if I change the fireView to be the same as view

    RowExpander@line168846

    if (me.grid.ownerLockable) {
    console.log("in this block");
    ownerLock = me.grid.ownerLockable;
    //fireView = ownerLock.getView();
    view = ownerLock.lockedGrid.view;
    fireView=ownerLock.lockedGrid.view;

  6. #6
    Sencha User
    Join Date
    Jun 2013
    Location
    Gelsenkirchen - Germany
    Posts
    5
    Vote Rating
    0
    skab is on a distinguished road

      0  

    Default Thanks mate

    Thanks mate


    I have version 4.2.2.1144 and it still does not seem to be fixed.

    According to your suggestion i wrote an overwrite as i cant edit original files:

    Code:
    Ext.override(Ext.grid.plugin.RowExpander, { // Override to fire collapsebody & expandbody
        init: function(grid) {
            this.callParent(arguments);
            grid.getView().addEvents('collapsebody', 'expandbody');
        },
        toggleRow: function(rowIdx, record) {
            var me = this,
                view = me.view,
                rowNode = view.getNode(rowIdx),
                row = Ext.fly(rowNode, '_rowExpander'),
                nextBd = row.down(me.rowBodyTrSelector, true),
                isCollapsed = row.hasCls(me.rowCollapsedCls),
                addOrRemoveCls = isCollapsed ? 'removeCls' : 'addCls',
                ownerLock, rowHeight, fireView;
    
    
            // Suspend layouts because of possible TWO views having their height change
            Ext.suspendLayouts();
            row[addOrRemoveCls](me.rowCollapsedCls);
            Ext.fly(nextBd)[addOrRemoveCls](me.rowBodyHiddenCls);
            me.recordsExpanded[record.internalId] = isCollapsed;
            view.refreshSize();
    
    
            // Sync the height and class of the row on the locked side
            if (me.grid.ownerLockable) {
                ownerLock = me.grid.ownerLockable;
    //            fireView = ownerLock.getView();
                view = ownerLock.lockedGrid.view;
                fireView=ownerLock.lockedGrid.view;
                rowHeight = row.getHeight();
                // EXTJSIV-9848: in Firefox the offsetHeight of a row may not match
                // it's actual rendered height due to sub-pixel rounding errors. To ensure
                // the rows heights on both sides of the grid are the same, we have to set
                // them both.
                row.setHeight(isCollapsed ? rowHeight : '');
                row = Ext.fly(view.getNode(rowIdx), '_rowExpander');
                row.setHeight(isCollapsed ? rowHeight : '');
                row[addOrRemoveCls](me.rowCollapsedCls);
                view.refreshSize();
            } else {
                fireView = view;
            }
            fireView.fireEvent(isCollapsed ? 'expandbody' : 'collapsebody', row.dom, record, nextBd);
            // Coalesce laying out due to view size changes
            Ext.resumeLayouts(true);
        },
    });