1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    biswajitpatra is on a distinguished road

      0  

    Default How to Create nesting grid in ExtJS- 3.3.1??

    How to Create nesting grid in ExtJS- 3.3.1??


    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.

  2. #2
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    kevin.chen is on a distinguished road

      0  

    Default


    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)



    Code:
        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
        });

Thread Participants: 1