Extjs 4 nested grid or sub grid demo



Extjs 4 nest grid or sub grid demo

grid的嵌套用到外掛程式rowexpander，ext4.2.2.1144版本官方有這個外掛程式。

實現重點

一：nest grid不能響應很多事件，否則會發生異常進入到函數 getHeaderIndex: function (header) 。

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

二：column定義時增加屬性 menuDisabled : true,resizable:false，防止一些看起來不符合常理介面表現。

subgrid.js

IE7以上

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: [                '<div  class="detailData">',                '</div>'            ]    }],    collapsible: true,    animCollapse: false,    title: 'Expander Rows in a Collapsable Grid',    iconCls: 'icon-grid',    rowLines : false,    initComponent: function () {        var me = this;        this.callParent(arguments);        me.getView().on('expandBody', me.onExpandNestedGrid,me);    },    onExpandNestedGrid : function (rowNode, record, expandRow, eOpts) {    var grid = Ext.getCmp(rowNode.id + "-grid");    if(!grid){    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', {            id : rowNode.id + "-grid",                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'                    ]);}    }});Ext.onReady(function () {    Ext.QuickTips.init();    Ext.BLANK_IMAGE_URL = '/images/s.gif';    var mainGrid = Ext.create('NestGridPanel');    mainGrid.render(Ext.getBody());});

IE7

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: [                '<div  class="detailData">',                '</div>'            ]    }],    collapsible: true,    animCollapse: false,    title: 'Expander Rows in a Collapsable Grid',    iconCls: 'icon-grid',    rowLines : false,    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

<!DOCTYPE html><html><head><title>nest grid</title>        <meta http-equiv="description" content="no-cache">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <link rel="stylesheet" type="text/css" href="./Ext/resources/css/ext-all-neptune-debug.css">                <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></head><body></body></html>

參考：

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