View Full Version : RowExpander and lazy row dom insertion

2 Jul 2013, 10:56 AM
I am very new to ExtJS hence struggling with a few issues. One of them ...

I am using the rowexpander plugin in one of my data grids. I would like the row to display the expand/collapse "+" column but not add the additional row in the DOM. Reason: Performance and memory.

I am showing 2000 rows and chances are that the user might never expand any row. In which case, why add the row to the DOM upfront. Why not add it at the time when the user clicks on the expand button.

Any ideas, how I would do it?


4 Jul 2013, 10:48 AM
I'm afraid there's no out of the box config to defer the rendering of the rowbody content. You'll have to use the expandbody event and get just a little bit creative. Something like:

Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
height: 200,
width: 400,
renderTo: Ext.getBody(),
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: ' '
viewConfig: {
jitTpl: new Ext.XTemplate('<img src="{imgSrc}" />'),
listeners: {
expandbody: function (parent, record, expanded) {
if (!record.hasExpanded) {
imgSrc: 'http://www.sencha.com/img/sencha-large.png'
record.hasExpanded = true;

14 May 2014, 11:54 AM
Hi slemmon,

I tried your receipe for a lazy loading rowexpander ant it works well... until we sort a column

I found an extension created by mitchellsimoens who have this same issue

I created a fiddle with your example to demonstrate the problem:
I think the solution could be in getRowBodyFeatureData()

I think we must to override and rerender all expanded rowBodyTpl like this but the problem is at this moment the DOM doesn't exist.

getRowBodyFeatureData: function(record, idx, rowValues) {
var me = this;
me.self.prototype.setupRowData.apply(me, arguments);
rowValues.rowBody = me.getRowBodyContents(rowValues);
rowValues.rowBodyCls = me.recordsExpanded[record.internalId] ? '' : me.rowBodyHiddenCls;

// add this block
if (this.recordsExpanded[record.internalId]) {
// update the template
// but the DOM doesn't exist yet

15 May 2014, 10:43 AM
I think I have a solution

On gridview refresh event, I simply collapse all expanded rows.