RowExpander including expand/collapse all via header

[zombeerose]

Anybody familiar with the Ext.ux.RowExpander class provided by ExtJS may find this ux helpful. It allows a user to click the column header that is created by the RowExpander in order to quickly expand/collapse all rows. Check it out.

Any feedback is welcome.

[mitchellsimoens]

You should throw this up onto GitHub or something so we can read the source... I'm a nerd, I like reading source code

[zombeerose]

Here ya go...
https://github.com/zombeerose/RowExpander

[mitchellsimoens]

Cool, very nice sir! Two very small performance things...

You have two col.on statements in your init method, you could join into one:

col.on({
    scope : me,
    headerclick : me.onHeaderClick,
    render : me.onHeaderRender
});

In your toggleAll method you have ds.each which will iterate through the store items. It would perform just a tad faster if you used your own for loop...

var recs = ds.data.items,
    r = 0,
    rNum = recs.length,
    record;

for (; r < rNum; r++) {
     record = recs[r];

    if (me.recordsExpanded[record.internalId] !== expand) {
        me.toggleRow(r);
    }
}

The reason is two fold. First in the for loop, r is your index versus having to do the indexOf lookup. Also using ds.each you are executing a function for every loop iteration which can affect performance, with the for loop you aren't executing a function.

[zombeerose]

@mitchellsimoens
Thanks for the review. I have to disagree about your first point though regarding listeners. If you examine the observable code, you will notice that passing an object to the listener is less efficient because it must iterate the object and call itself for each case. It also incurs a regex performance hit for every iteration. I ran some tests to prove it.

Running on Chrome v17.0

var c = new Ext.Component();
var i = 0;
var start = new Date().valueOf();

for (i = 0; i < 50000; i++){
  c.on('show',Ext.emptyFn);
  c.on('hide',Ext.emptyFn);
  c.on('activate',Ext.emptyFn);
  c.on('beforeshow',Ext.emptyFn);
  c.on('beforehide',Ext.emptyFn);
}
var end = new Date().valueOf();
console.log(end - start);

Averaged about 1239 ms.

var c = new Ext.Component();
var i = 0;
var start = new Date().valueOf();

for (i = 0; i < 50000; i++){
  c.on({
    'show':Ext.emptyFn,
    'hide':Ext.emptyFn,
    'activate':Ext.emptyFn,
    'beforeshow':Ext.emptyFn,
    'beforehide':Ext.emptyFn
  });
}
var end = new Date().valueOf();
console.log(end - start);

Averaged about 1499 ms.

-----
Thanks for the record loop suggestion. I am always at odds when it comes to loops b/c the Ext.each is convenient, results in slightly less code, and easier to read IMO. I would also think that it is more resilient to API changes, but that is just a guess. None the less, I have made the change and should be available on github now.

[mysticav]

Great Plugin. Thanks.

I would like to see a "plus/minus" icon on top of the column.

Hope you can integrate that.

[antarctica77]

I wanted to add that this was very useful for me and I'm using it with ExtJS 6. I did augment the toggleAll function a bit to assign the correct class to incoming nodes with bufferedRender: true on the grid:toggleAll: function(expand){ var me = this, ds = me.getCmp().getStore(), records = ds.getRange(), l = records.length, nodes = me.view.getNodes(), n = nodes.length, i, node, record; for (i = 0; i < l; i++){ record = records[i]; node = me.view.getNode(i); if(node) { if (me.recordsExpanded[record.internalId] !== expand){ me.toggleRow(i,record); } } else { if (me.recordsExpanded[record.internalId] !== expand){ me.recordsExpanded[record.internalId] = expand; } } } }Anyway, just wanted to say thanks for posted this - it's still useful many years later.

[zombeerose]

@antarctica77

Glad to hear it's useful, and thanks for the update.

I integrated your change and posted it on github: https://github.com/zombeerose/RowExp...ae4b11db006b20

BTW, please wrap JavaScript in [code] tags for readability.

[RMcDermott]

Great plugin, thanks! I'm using this with ExtJS 6.5.

In case this is useful to anyone, I used the following CSS to add the plus/minus icon at the top using Font Awesome:

.rowexpand-expand-all,
.rowexpand-collapse-all {
	font: 16px/1 FontAwesome;
	overflow: visible;
	text-overflow: initial;
	cursor: pointer;
}


.rowexpand-expand-all:before {
	content: "\f196";
}


.rowexpand-collapse-all:before {
	content: "\f147";
}