Ext4.2+ Ext.grid.plugin.RowExpander has a bug, and the collapsebody and expandbody added cannot be triggered. I checked the source code corresponding to Ext.grid.plugin.RowExpander, and did not add collapsebody and expandbody events. Even if the init and toggleRow methods of Ext.grid.plugin.RowExpander are rewrited according to the online method, the collapsebody and expandbody events cannot be triggered.
Solution: Add collapsebody and expandbody events to grid object, then configure these two events for grid, and at the same time rewrite the toggleRow method of Ext.grid.plugin.RowExpander, and trigger the two events added by grid.
The test source code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Ext4.2+ Ext.grid.plugin.RowExpander cannot trigger collapsebody, expandbody event solution</title><link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" rel="external nofollow" /><script type="text/javascript" src="../../ext-all-debug.js"> </script><script>Ext.override(Ext.grid.plugin.RowExpander, { // Override to fire collapsebody & expandbody init: function(grid) { this.callParent(arguments);// grid.getView().addEvents('collapsebody', 'expandbody');//The solution found in the ext forum, so that events cannot be added//Storage grid object this.grid=grid this.grid.addEvents('collapsebody', 'expandbody');//Add events to grid object}, 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 is actually 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; }//Trigger event through grid, not viewthis.grid.fireEvent(isCollapsed? 'expandbody' : 'collapsebody', row.dom, record, nextBd);//The following is the solution to the ext forum, invalid //fireView.fireEvent(isCollapsed? 'expandbody' : 'collapsebody', row.dom, record, nextBd); // Coalesce laying out due to view size changes Ext.resumeLayouts(true); },});//Ext.loader.setConfig({enabled:true});Ext.onReady(function() { Ext.QuickTips.init(); var store = new Ext.data.Store({ fields:[ {name:'fileName',type:'string'}, {name:'room',type:'string'}, {name:'recordDate',type:'string'}, ], data:[ {fileName:'File 1',room:'Conference Room 1',recordDate:'2014-07-03'}, {fileName:'File 2',room:'Conference Room 2',recordDate:'2014-07-03'}, {fileName:'File 3',room:'Conference Room 3',recordDate:'2014-07-03'} ], autoLoad:true }); var expander = new Ext.grid.plugin.RowExpander({ rowBodyTpl:new Ext.XTemplate('<div>pp</div>'), listeners:{ expandbody:function(){//This is the event console.log('Ext.grid.plugin.RowExpander'); } } }); Ext.create('Ext.grid.Panel',{ xtype: 'row-expander-grid', store: store, listeners:{ expandbody:function(){//OK, can trigger console.log('fired from grid'); } }, renderTo:Ext.getBody(), columns: [ {text: "File Name", flex: 1, dataIndex: 'fileName'}, {text: "Conference Room", dataIndex: 'room'}, {text: "Record Date", renderer: Ext.util.Format.dateRenderer('Ym-d'), dataIndex: 'recordDate'} ], width: 600, height: 300, plugins:expander, collapsible: true, animCollapse: false, title: 'Expander Rows in a Collapsible Grid', iconCls: 'icon-grid' });});</script></head><body id="docbody"></body></html>