Thursday, October 11, 2012

Nested Grids

It's possible to have a grid inside a row of another grid. i.e Nested Grids.
We can use the existing rowExpander plugin and achieve this:

    plugins:[{
            ptype: 'rowexpander',
            expandOnDblClick :false,
            pluginId: 'rowexpanderplugin',
            rowBodyTpl : ['
'
            ],
            }]

When row is expanded we can render the inner/nested grid into the expanded row:

expandbody : function(rowNode,record, expandbody) {
  //destroy the existing grid if the row was expanded before 
  var grid=Ext.getCmp('rowExpander-'+record.get('id')+'-grid');
  if(!Ext.isEmpty(grid)){
    grid.destroy();
  }
 
  var innerGrid=new Ext.grid.Panel({
     id:'rowExpander-'+record.get('id')+'-grid',
     autoDestroy:true,
     renderTo:'rowExpander-'+record.get('id'),
     ...});
      
  profileRunGrid.getEl().swallowEvent(['mouseover', 'mousedown',
  'click','dblclick', 'onRowFocus']);
}