How to Create nesting grid in ExtJS- 3.3.1??

[biswajitpatra]

How to Create nesting grid in ExtJS- 3.3.1?? which will support row expand. I tried with the rowexpander function for row expand but it didn't work for me. Please help me to solve the problem.

[kevin.chen]

rowexpander is not used to nested another grid in grid, it is used to render a block of html based on XTemplate to expanded grid row.

you need to create rowExpander instance, assign it to grid plugin(this is only for ExtJs 3)

    var expander = new Ext.ux.grid.RowExpander({
        tpl : new Ext.Template(
            '<p><b>Company:</b> {company}</p><br>',
            '<p><b>Summary:</b> {desc}</p>'
        )
    });


    var grid1 = new xg.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel({
            defaults: {
                width: 20,
                sortable: true
            },
            columns: [
                expander,
                {id:'company',header: "Company", width: 40, dataIndex: 'company'},
                {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: "Change", dataIndex: 'change'},
                {header: "% Change", dataIndex: 'pctChange'},
                {header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ]
        }),
        viewConfig: {
            forceFit:true
        },        
        width: 600,
        height: 300,
        plugins: expander,
        collapsible: true,
        animCollapse: false,
        title: 'Expander Rows, Collapse and Force Fit',
        iconCls: 'icon-grid',
        renderTo: document.body
    });