Extjs 4 nest grid or sub grid demo

Zookeeper

Extjs 4 nest grid or sub grid demo

The plug-in rowexpander is used for grid Nesting. This plug-in is available in ext4.2.2.1144.

Implementation focus

1. nest grid cannot respond to many events. Otherwise, an exception will occur and enter the getHeaderIndex: function (header) function ).

 innerGrid.getEl().swallowEvent([                    'mousedown', 'mouseup', 'click',                    'contextmenu', 'mouseover', 'mouseout',                    'dblclick', 'mousemove'                ]);

Ii. added the menuDisabled: true, resizable: false attribute when column is defined to prevent some interface appearances that do not seem to conform to common sense.

Subgrid. js

Ext.define('Company', {    extend: 'Ext.data.Model',    fields: [            { name: 'id' },            { name: 'company' },            { name: 'price', type: 'float' },            { name: 'change', type: 'float' },            { name: 'pctChange', type: 'float' },            { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' },            { name: 'industry' },            { name: 'desc' }         ]});var dummyDataForMainGrid = [        ['1', '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],        ['2', 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],        ['3', 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],        ['4', 'American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am', 'Finance']    ];var mainStore = Ext.create('Ext.data.ArrayStore', {    model: 'Company',    data: dummyDataForMainGrid});Ext.define('NestGridPanel', {    extend: 'Ext.grid.Panel',    store: mainStore,    columns: [            {xtype: 'rownumberer'},            { text: "Company", flex: 1, dataIndex: 'company' },            { text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price' },            { text: "Change", dataIndex: 'change' },            { text: "% Change", dataIndex: 'pctChange' },            { text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }        ],    autoWidth: true,    selModel: {        selType: 'rowmodel'    },    height:400,    plugins: [{        ptype: 'rowexpander',        rowBodyTpl: [                '',                ''            ]    }],    collapsible: true,    animCollapse: false,    title: 'Expander Rows in a Collapsable Grid',    iconCls: 'icon-grid',    //renderTo: Ext.getBody()    initComponent: function () {        var me = this;        this.callParent(arguments);        me.getView().on('expandBody', me.onExpandNestedGrid,me);        me.getView().on('collapsebody', me.onCollapseNestedGrid,me);    },    onExpandNestedGrid : function (rowNode, record, expandRow, eOpts) {    var detailData = Ext.DomQuery.select("div.detailData", expandRow);        //Model for the inside grid store        Ext.define('TestModel', {            extend: 'Ext.data.Model',            fields: [                { name: 'Field1' },                { name: 'Field2' },                { name: 'Field3' }            ]        });        //dummy data for the inside grid        var dummyDataForInsideGrid = [            ['dummyRow1', 1, 2],            ['dummyRow2', 1, 2],            ['dummyRow3', 1, 3]        ];        var insideGridStore = Ext.create('Ext.data.ArrayStore', {            model: 'TestModel',            data: dummyDataForInsideGrid        });        var innerGrid = Ext.create('Ext.grid.Panel', {            store: insideGridStore,            columns: [                {xtype: 'rownumberer'},                { text: "Column1", dataIndex: 'Field1' ,menuDisabled : true,resizable:false},                { text: "Column2", dataIndex: 'Field2' ,menuDisabled : true,resizable:false},                { text: "Column3", dataIndex: 'Field3' ,menuDisabled : true,resizable:false}            ],            columnLines: false,            autoWidth: true,            autoHeight: true,            frame: false,            iconCls: 'icon-grid',            renderTo: detailData[0],            preventHeader: true        });        innerGrid.getEl().swallowEvent([                    'mousedown', 'mouseup', 'click',                    'contextmenu', 'mouseover', 'mouseout',                    'dblclick', 'mousemove'                ]);    },    onCollapseNestedGrid : function (rowNode, record, expandRow, eOpts) {    var detailData = Ext.DomQuery.select("div.detailData", expandRow);    var parent = detailData[0];        var child = parent.firstChild;        while (child) {            child.parentNode.removeChild(child);            child = child.nextSibling;        }    }});Ext.onReady(function () {    Ext.QuickTips.init();    Ext.BLANK_IMAGE_URL = '/images/s.gif';    var mainGrid = Ext.create('NestGridPanel');    mainGrid.render(Ext.getBody());});

Subgrid.html

nest grid        
     
         
                 <script type="text/javascript" src="./Ext/ext-all-debug.js"></script><script type="text/javascript" src="./Ext/ext-theme-neptune.js"></script>        <script type="text/javascript" src="./subgrid.js"></script>

Refer:

Http://blog.csdn.net/trassion/article/details/10938069