Nested EXTJS 4 Grids

[harman]

Hi All,
I am new to ExtJS.
I need to put a Grid inside every row of another grid.
I went through the Grid Plug in example on sencha. But i am only able to put in the text inside rowBodyTpl.
I already have tried example at the following link.
http://mikhailstadnik.com/ext/examples/nested-grid.htm
but it gives an error that i am trying to add a null child to the container Id blah blah.

Please help me out guys.

[scottmartin]

There are several threads about this:
http://www.sencha.com/forum/showthre...ht=nested+grid

Perhaps this will change soon.

Have you had a look at this:
http://dev.sencha.com/deploy/ext-4.0.2a/examples/tree/treegrid.html

It may help for now.

Regards,
Scott.

[scottmartin]

This may help in regards to the first link on the RowExpander issue:

It is possible to use both the RowExpander and grouping feature in the same grid. Get 4.0.6. The RowExpander shipped with 4.0.2a does not work

.

Regards,
Scott.

[harman]

thanks for your help frnd but i already have tried those examples.

[harman]

Seems like ExtJs 4 does not support nesting of grids.
Sad!!
will have to roll back to version 3 for the specific issue.
But still if any one comes accross a solution do reply.

Thanks

[stratboogie]

You can do nested grids. It is kind of tricky but can be done.

example:
in your parent grid's config do this:

plugins: [{
		ptype: "rowexpander",
		rowBodyTpl: ['<div id="SessionInstructionGridRow-{ClientSessionId}" ></div>']

	}],

then in your expandbody event do this:

var targetId = 'SessionInstructionGridRow-' + record.get('ClientSessionId');
					if (Ext.getCmp(targetId + "_grid") == null) {
						var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', {
							renderTo: targetId,
							id: targetId + "_grid"
						});
						rowNode.grid = sessionInstructionGrid;
						sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
						sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid, { ClientSessionId: record.get('ClientSessionId') });
					}

Thanks
Timothy

[harman]

Thanks Timothy,
I will try this approarch.

[hadas]

you can explaine more about the trick?
where to put it exactly and ect.
thanks

[Golden.Vulture]

It would really help if you can please elaborate on this point.
Thanks

You can do nested grids. It is kind of tricky but can be done.

example:
in your parent grid's config do this:

plugins: [{
        ptype: "rowexpander",
        rowBodyTpl: ['<div id="SessionInstructionGridRow-{ClientSessionId}" ></div>']

    }],

then in your expandbody event do this:

var targetId = 'SessionInstructionGridRow-' + record.get('ClientSessionId');
                    if (Ext.getCmp(targetId + "_grid") == null) {
                        var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', {
                            renderTo: targetId,
                            id: targetId + "_grid"
                        });
                        rowNode.grid = sessionInstructionGrid;
                        sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                        sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid, { ClientSessionId: record.get('ClientSessionId') });
                    }

Thanks
Timothy

[klyde]

Hi, I'm evaluating EXTJS 4 as a possible toolkit for adoption by our team and am trying to get a nested grid working as this functionality is a requirement for our framework.

After adding rowexpander to my grid and attempting this grid creation in the expandbody event as shown here, my expandbody handler code doesn't even seem to be getting invoked. Am I missing something? I've tried binding the event to the method in various ways and it isn't getting hit.

Can you elaborate on what otherwise sounds like a pretty simple statement:

then in your expandbody event do this

And show that being done in context?

Some of my attempts:

   var grid = Ext.create('Ext.grid.Panel', {        id: 'grid',


        plugins: [{
            ptype: "rowexpander",
            //not sure if the name of this div id is signficant, got this from
            //http://stackoverflow.com/questions/8254113/nested-grid-with-extjs-4
            rowBodyTpl: ['<div id="NestedGridRow-{guid}" ></div>']
        /* tried it here
            listeners: {
                expandbody : function(rowNode,record, expandbody) {
                    console.log('expandbody fired.');
                    var targetId = 'NestedGridRow-' + record.get('guid');
                    if (Ext.getCmp(targetId + "_grid") == null) {
                        //var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', { //author's grid class.  Name support presumptions above.
                        var nestedGrid = Ext.create('Ext.grid.Panel', { //replace w/ standard Ext grid
                            renderTo: targetId,
                            id: targetId + "_grid",
                            columns: getColumns()
                        });
                        rowNode.grid = nestedGrid;
                        nestedGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                        nestedGrid.fireEvent("bind", nestedGrid, { guid: record.get('guid') });
                    }
                }
            }
            */
        }],
            /* another example I found - doesn't work...no this.view object
        initComponent: function() {
			this.view.on('expandbody', function (rowNode, record, expandRow) {
                console.log('expandbody fired.');
                var targetId = 'NestedGridRow-' + record.get('guid');
                if (Ext.getCmp(targetId + "_grid") == null) {
                    //var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', { //author's grid class.  Name support presumptions above.
                    var nestedGrid = Ext.create('Ext.grid.Panel', { //replace w/ standard Ext grid
                        renderTo: targetId,
                        id: targetId + "_grid",
                        columns: getColumns()
                    });
                    rowNode.grid = nestedGrid;
                    nestedGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                    nestedGrid.fireEvent("bind", nestedGrid, { guid: record.get('guid') });
                }
            });
        },
        */
        listeners: {
            //perhaps the name of div id above is only significant in that it must match what is referenced
            //as a target here in the expandbody handler.  I'm unsure about the ClientSessionId...perhaps
            //this is a FK in the clicked record.
            expandbody : function(rowNode,record, expandbody) {
                console.log('expandbody fired.');
                var targetId = 'NestedGridRow-' + record.get('guid');
                if (Ext.getCmp(targetId + "_grid") == null) {
                    //var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', { //author's grid class.  Name support presumptions above.
                    var nestedGrid = Ext.create('Ext.grid.Panel', { //replace w/ standard Ext grid
                        renderTo: targetId,
                        id: targetId + "_grid",
                        columns: getColumns()
                    });
                    rowNode.grid = nestedGrid;
                    nestedGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                    nestedGrid.fireEvent("bind", nestedGrid, { guid: record.get('guid') });
                }
            }
        },
        
        store: store,
        stateful: false, 
             
        collapsible: true,
        resizable: true,
        multiSelect: true,
        


        height: 350,
        width: 1000,
        title: 'Summary',
        renderTo: 'default_ItemCollection_Resize',
        tools: [{
            type: 'restore',
            handler: function(event, target, owner, tool){
                owner.findParentByType('gridpanel').setSize(1000,350);
            }
        }],
        viewConfig: {
            stripeRows: true,
            enableTextSelection: true
        },
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store,   
        dock: 'bottom',
        displayInfo: true
        }],


    columns: getColumns()
        
    });
  
});

I didn't really expect the nesting to work on this first attempt the way I half-understand everything and am hacking through this (attempting recursive addition of record being expanded), but at least need to get the event firing so that I can properly provide the object to the newly created grid.