View Full Version : [FIXED] RowExpander doesn't work on ExtJs 4.0.2 (ext-all-debug.js) but worked on (ext-all.js)

17 Jun 2011, 12:59 AM
Ext version tested:

Ext 4.0.2 / 4.0.2a


FireFox 4
FireFox 3.6


The RowExpanderPlugin is not working, each time an item need to be expanded and clicking the expand trigger (the [+] button), it'll pop up an error massage.

Steps to reproduce the problem:

Create a grid which using a RowExpanderPlugin or simply use the code from sencha: http://dev.sencha.com/deploy/ext-4.0.2/examples/grid/grid-plugins.html
Instead of using the ext-all.js, which currently being used by Sencha in the code example, try to include the ext-all-debug.js or ext-all-debug-comments
To easily compare this problem, try to compare the online live example in:

Download ExtJs4, run the grid expander plugin example and it'll produce an error.
If you check the source from firebug, the live example is using ext-all.js, while the offline packages use ext-all-debug.js

Expected result:

Each time an expander trigger button (the [+] button) of a row is clicked, it should open an expander which inside this small box, it should render the html template that we have defined. Just like the example: http://dev.sencha.com/deploy/ext-4.0.2/examples/grid/grid-plugins.html
It was working fine from 4.0.0

The result that occurs instead:

It'll throw up errors in the firebug:

this.view is undefined
var rowNode = this.view.getNode(rowIdx),

The piece of error code, traced from firebug:

toggleRow: function(rowIdx) {
var rowNode = this.view.getNode(rowIdx),
row = Ext.get(rowNode),
nextBd = Ext.get(row).down(this.rowBodyTrSelector),
record = this.view.getRecord(rowNode);

Test Case:

Please simply use this example as the working example: http://dev.sencha.com/deploy/ext-4.0.2/examples/grid/grid-plugins.html

And download the ExtJs4.0.2a, deploy it in your machine, run the local grid expandable example.
On both example after clicking the expander trigger, the online example would not produce an error while the downloaded/offline does)
to see where the ext framework attached, open the firebug console, go to HTML tab, select the <head>, then search for the framework.
the live version have this:

<img class="twisty " role="presentation"><script src="http://dev.sencha.com/deploy/ext-4.0.2/ext-all.js" type="text/javascript">
and the offline/downlaoded (as an example, I put it under my htdocs):

<script src="http://localhost/extjs/ext-all-debug.js" type="text/javascript">

Debugging already done:

Possible fix:
http://www.sencha.com/forum/showthread.php?137418-RowExpander-doesn-t-work-on-ExtJs-4.0.2-%28ext-all-debug.js%29-but-worked-on-%28ext-all.js%29&p=616646&viewfull=1#post616646 (http://www.sencha.com/forum/showthread.php?137418-RowExpander-doesn-t-work-on-ExtJs-4.0.2-%28ext-all-debug.js%29-but-worked-on-%28ext-all.js%29&p=616646&viewfull=1#post616646)
Additional CSS used:

only default ext-all.css

Operating System:

Microsoft Windows 7

17 Jun 2011, 8:39 AM
Using 4.0.2a, Rowexpander does NOT work under any version of the framework file


17 Jun 2011, 8:26 PM
Yes - it has stopped working in both 4.0.2 and 4.0.2a I believe.

P.S. should this thread be in Bugs?

20 Jun 2011, 1:48 AM
well, yeah, it's should be a bug. Can someone post it in bug forum? :D or I think the developers have already put this in the report. check this out: http://www.sencha.com/forum/showthread.php?133411-OPEN-EXTJSIV-2124-RowExpander-%28plugin-bug-%29-keep-adding-more-expander/page2

21 Jun 2011, 4:06 AM
You can fix the problem with the undefined "view"-Reference. You just have to get the reference beforehand from this.getCmp().

So as a quick fix I inserted the following row onto the first line of the toggleRow-function in the RowExpander.js:

toggleRow: function(rowIdx) {
this.view = this.getCmp().view;
var rowNode = this.view.getNode(rowIdx),

It may be not the best solution but it works for me.

21 Jun 2011, 7:25 AM
Intertesting, I still dont upgraded my project to 4.0.2/4.0.2a.


21 Jun 2011, 8:24 AM

thx, you've saved my ass dude... :D

13 Jul 2011, 3:19 AM
REQUIRED INFORMATION Ext version tested:

Ext 4.0.2a

Browser versions tested against:

FF4 (firebug installed)


The Up and Down method crash when RowExpander is used.
This is because they try to call the isXtype() method on the grid-header-special object (comming from the rowexpander getHeaderConfig()) which is not there

Steps to reproduce the problem:

Use the RowExpander in a grid
Place the grid on a panel's item list
Do a down() component search from the panel
where the grid is in the search path

The result that was expected:

The component that I was looking for is found

The result that occurs instead:

javascript error isXtype() is not a fuction

Test Case: Use the RowExpander in a grid and then do an UP or DOWN component search where the grid is in the search path

HELPFUL INFORMATION Screenshot or Video:


Debugging already done:

The filterByXtpe calls the isXType method on each component. This method is missing on the rowExpander header config.

filterByXType = function(items, xtype, shallow) {
if (xtype === '*') {
return items.slice();
else {
var result = [],
i = 0,
length = items.length,
for (; i < length; i++) {
candidate = items[i];
if (candidate.isXType(xtype, shallow)) {
return result;

Possible fix:

add the isXType() method to the getHeaderConfig method result object in RowExpander.js :

getHeaderConfig: function() {
var me = this,
toggleRow = Ext.Function.bind(me.toggleRow, me),
selectRowOnExpand = me.selectRowOnExpand;

return {
id: this.getHeaderId(),
width: 24,
sortable: false,
fixed: true,
draggable: false,
hideable: false,
menuDisabled: true,
cls: Ext.baseCSSPrefix + 'grid-header-special',
renderer: function(value, metadata) {
metadata.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';

return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander">&#160;</div>';
processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
if (type == "mousedown" && e.getTarget('.x-grid-row-expander')) {
var row = e.getTarget('.x-grid-row');
return selectRowOnExpand;
isXType : function(xtype, shallow){
return xtype === Ext.baseCSSPrefix +'grid-header-special';


Additional CSS used:

only default ext-all.css

Operating System:

Windows 7

13 Jul 2011, 10:52 AM
Looks like this is a bug report so I'm moving it to the bugs forum. Could you update your post to follow the bug template (http://www.sencha.com/forum/showthread.php?138165-How-to-report-a-bug)?

13 Jul 2011, 9:51 PM
Ok, will do that.

19 Jul 2011, 10:02 AM
replace this.view with this.getCmp().view in 2 places within the toggleRow function

toggleRow: function(rowIdx) {
var rowNode = this.getCmp().view.getNode(rowIdx); ///BECKY
var row = Ext.get(rowNode);
var nextBd = Ext.get(row).down(this.rowBodyTrSelector);
var record = this.getCmp().view.getRecord(rowNode);

// var rowNode = this.view.getNode(rowIdx),
// row = Ext.get(rowNode),
// nextBd = Ext.get(row).down(this.rowBodyTrSelector),
// record = this.view.getRecord(rowNode);

19 Jul 2011, 10:22 AM
Thanks, this one was fixed in 4.0.4

19 Jul 2011, 11:05 AM
When will 4.0.4 be available for download?

19 Jul 2011, 2:10 PM
When will 4.0.4 be available for download?

4.0.4 went out about 2 weeks ago via the support portal - if you log in there you'll see it. We're thinking of creating an automated message to send out to support subscribers whenever there's a new build so you're always aware...

2 Sep 2011, 10:17 AM
Trying to get visibility on this...

For anyone starting from the original RowExpander plugin, I'd like to point out this thread:

Fixes memory leaks and such. If you want to take it from 3.x to 4.x, it would help the community to start from that. Please spread the word in any related RowExpander threads you may find.

I would update it to 4.x, but I'm waiting for the fix Ed mentioned to go GA.

2 Sep 2011, 10:20 AM
Not long now...

2 Sep 2011, 10:33 AM
Man, you are fast! Thanks, Ed! :)

12 Sep 2011, 1:57 AM
HI All,
I am using row expander plugin in a grid in Extjs 4. But i am having with problem with two functionalities. They are
1) I am getting the expand icon('+' symbol) twice when i am clicking the menu item for the second time.
2) Second one is i am unable to get a scrollbar for the row expander plugin.

Please find the attached screenshots which may be helpful.

Please check the screenshots for the issue which i was mentioned above.In the 2nd screenshot i am not getting the scrollbar when i am cliking the expand all functionality. The code which i have implemented for expand all is

this.rowBodyTrSelector = '.x-grid-rowbody-tr';
this.rowBodyHiddenCls = 'x-grid-row-body-hidden';
this.rowCollapsedCls = 'x-grid-row-collapsed';
var getGrid =Ext.getCmp('accountInfDetails');
this.view = getGrid;
var view = this.view;
var store = view.store;
var count = store.totalCount;
for (i=0; i < count; i++)
var rowNode = view.view.getNode(i);
row = Ext.get(rowNode);
nextBd = Ext.get(row).down(this.rowBodyTrSelector);
record = view.view.getRecord(rowNode);
this.view.fireEvent('expandbody', rowNode, record, nextBd.dom);

Please help me in solving both the issues.


12 Sep 2011, 4:55 AM
Im still with 4.0.1 but had alike problem you described in #1, each time I use the expanded I got another expand icon: first time just one, second time 2, thrid time 3 and so.

This is my RowExpander's constructor code, I modified code is the one with "HACK" comment:

constructor: function() {
var grid = this.getCmp();
this.recordsExpanded = {};
// <debug>
if (!this.rowBodyTpl) {
Ext.Error.raise("The 'rowBodyTpl' config is required and is not defined.");
// </debug>
// TODO: if XTemplate/Template receives a template as an arg, should
// just return it back!
var rowBodyTpl = Ext.create('Ext.XTemplate', this.rowBodyTpl),
features = [{
ftype: 'rowbody',
columnId: this.getHeaderId(),
recordsExpanded: this.recordsExpanded,
rowBodyHiddenCls: this.rowBodyHiddenCls,
rowCollapsedCls: this.rowCollapsedCls,
getAdditionalData: this.getRowBodyFeatureData,
getRowBodyContents: function(data) {
return rowBodyTpl.applyTemplate(data);
ftype: 'rowwrap'

if (grid.features) {
grid.features = features.concat(grid.features);
} else {
grid.features = features;

// SESS - 17.06.2011
// If the grid config is used to instantiate another grid
// the column is added again so lets find the column with
// the headerId and if exists dont create the expand column
var addExpand = true;
if (!this.headerId) {
Ext.each(columns, function(c) {
if (this.headerId == c.id) {
addExpand = false;
return false;
}, this);
if (addExpand) {
// grid.columns.unshift(this.getHeaderConfig());
grid.on('afterlayout', this.onGridAfterLayout, this, {single: true});


13 Sep 2011, 1:06 AM
Hi ssamayoa,
Thanks for the reply. I made the changes to the construtor in the plugin code,but still the problem was not solved. can u please help me.


13 Sep 2011, 11:18 AM
FYI this was fixed a couple of patch releases back (starting in 4.0.4 I think)

13 Sep 2011, 9:39 PM
Hi edspencer,

Thanks for the reply. Can u please provide me the link (or) forum message for the solution of that particular issue.


13 Sep 2011, 10:10 PM
It's in the framework itself - we don't usually break fixes out into individual patches and post them up here. What sucks a little is that while support subscribers get access to these regular patch releases, they'll only become public once 4.1.0 lands. Normally that wouldn't be a massive deal but we shipped 4.0.0 with more bugs than we would have liked (including this one). We will do better next time, I hate having the public version lag behind the latest stable like this

14 Sep 2011, 2:15 AM
Hi Edspencer,
Thank you very much for the reply.


25 Oct 2011, 6:02 PM
Adding the isXType() method to the "getHeaderConfig" method of RowExpander.js have not really solve the problem.

The Actual problem is that, 'rowexpander' does not get the property "this.view" in "toggleRow" method of RowExpander.js

you just need to assign actual view to 'rowexpander' as shown below.
so the final code for toggleRow method will be, as shown below.

toggleRow: function (rowIdx) {
this.view = this.getCmp().getView();
var rowNode = this.view.getNode(rowIdx),
row = Ext.get(rowNode),
nextBd = Ext.get(row).down(this.rowBodyTrSelector),
record = this.view.getRecord(rowNode);

if (row.hasCls(this.rowCollapsedCls)) {
this.recordsExpanded[record.internalId] = true;
this.view.fireEvent('expandbody', rowNode, record, nextBd.dom);
} else {
this.recordsExpanded[record.internalId] = false;
this.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);

3 Nov 2011, 4:00 AM
I have made that fix, But still the problem isn't solved. I am getting the expander icon twice,thrice so on..

13 Jun 2013, 10:37 AM
I'm using 4.2.1

nextBd = Ext.get(row).down(this.rowBodyTrSelector),

nextBd is null. help me please

9 Sep 2013, 3:15 AM
try this

toggleRow: function(rowIdx, record) { rowIdx = record.store.indexOf(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
me.recordsExpanded[record.internalId] = isCollapsed;

// 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;
rowHeight = row.getHeight();
row = Ext.fly(view.getNode(rowIdx), '_rowExpander');
} else {
fireView = view;
fireView.fireEvent(isCollapsed ? 'expandbody' : 'collapsebody', row.dom, record, nextBd);
// Coalesce laying out due to view size changes