ExtJS4 - Rendering a subgrid

Question

I'm trying to create a grid inside a grid row when I expand the row using the rowexpander plugin. How do I render the subgrid on the expandbody event?

This is my code so far, it is used as an event handler property when I define my grid panel:

 getOtherProducts: function (rowNode, record, expandRow, eOpts) {
        $.ajax({
            type: 'GET',
            url: "Report.aspx/GetOtherProducts",
            data: { ID: record.data['ID'] },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function () {
                var subStore = Ext.create('pr.store.Store-Products');
                subStore.proxy.extraParams.productID = record.data['ID'];

                var subGrid = Ext.create('Ext.grid.Panel', {
                    store: subStore
                });

                subGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick']);
            },
            error: function () {
                showNotificationBar("Error retrieving product data. Re-expand the row to try again.");
            }
        });
    },

You would probably have to extend the rowexpander plugin. I had do something similar but using the roweditor plugin, [like this](http://stackoverflow.com/questions/8812147/extjs-extend-grid-roweditor-plugin-to-edit-array). — egerardus, Mar 06 '12 at 19:02

score 0 · Accepted Answer · answered Mar 07 '12 at 15:45

stratboogie's answer at http://www.sencha.com/forum/showthread.php?151442-Nested-EXTJS-4-Grids did the job.

I made a slight modification to store the Element ID into an array

subGrids.push(subGrid.id);

and then overrode paging event handlers to loop through the array and destroy all elements with the IDs inside the array to keep memory in check.

function destroySubGrids(){
    Ext.each(subGrids, function(id){
            var subGrid = Ext.getCmp(id);
            if(subGrid){
                subGrid.destroy();
                delete subGrid;
            }
        });
    subGrids = [];  
    console.log(Ext.ComponentMgr.all.length); //debug
}

ExtJS4 - Rendering a subgrid

1 Answers1