EXTJS 4.2 資料 Grid嵌套

如圖：

var ParentContCateId = 0;var start = 0;var limit = 20;DistributionPointForm = function () {    Ext.define('Warehouse', {        extend: 'Ext.data.Model',        fields: [                { name: 'StoreId' },                { name: 'StoreCode' },                { name: 'StoreName', type: 'string' },                { name: 'Address', type: 'string' },                { name: 'PostCode', type: 'string' },                { name: 'AreaId', type: 'string' },                { name: 'ManufacturerId', type: 'string' },                { name: 'ManagerMethod', type: 'string' },                { name: 'Contactor', type: 'string' },                { name: 'ContactInfo', type: 'string' },                { name: 'City', type: 'string' },                //{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' },        ]    });    var mainStore = Ext.create('Ext.data.Store', {        model: 'Warehouse',//這個地方user不是一個對象，而是一個類        pageSize: limit,  //頁容量20條數據        //是否在服務端排序 （true的話，在客戶端就不能排序）        remoteSort: false,        remoteFilter: true,        method: 'POST',        PRoxy: {//代理            type: 'Ajax',            url: '/UI/HttpHandlerData/StoreManagement/DistributionPoint.ashx?Operation=SearchInfoWarehouse',            extraParams: {                start: start,                limit: limit            },            reader: {                type: 'json', //返回數據類型為json格式                root: 'Table',  //根節點                totalProperty: 'result' //數據總條數            }        },        sorters: [{            //排序字段。            property: 'StoreId',            //排序類型，默認為 ASC             direction: 'desc'        }],        autoLoad: true  //即時加載數據    });    function displayInnerGrid(renderId) {        //Model for the inside grid store        Ext.define('DistributionPoint', {            extend: 'Ext.data.Model',            fields: [                    { name: 'DPId' },                    { name: 'CompanyId' },                    { name: 'CompanyName' },                    { name: 'StoreId' },                    { name: 'DPCode' },                    { name: 'DPName' },                    { name: 'LocationId' },                    { name: 'LocationName' },                    { name: 'Leadtime' },                    { name: 'CompanyTypeName' },                    { name: 'CompanyTypeId' }            ]        });        var insideGridStore = Ext.create('Ext.data.Store', {            model: 'DistributionPoint',//這個地方DistributionPoint不是一個對象，而是一個類            pageSize: limit,  //頁容量20條數據            remoteSort: false,            remoteFilter: true,            method: 'POST',            proxy: {//代理                type: 'ajax',                url: '/UI/HttpHandlerData/StoreManagement/DistributionPoint.ashx?operation=SearchInfoDistributionPoint',                extraParams: {                    start: start,                    limit: limit,                    StoreId: renderId //傳入StoreId進行過濾                },                reader: {                    type: 'json', //返回數據類型為json格式                    root: 'Table',  //根節點                    totalProperty: 'result' //數據總條數                }            },            groupField: 'CompanyTypeName', //確定哪一項分組             sorters: [{                //排序字段。                property: 'DPId',                //排序類型，默認為 ASC                 direction: 'ASC'            }],            autoLoad: true  //即時加載數據        });        innerGrid = Ext.create('Ext.grid.Panel', {            title: '門店信息列表',            store: insideGridStore,            forceFit: true,//填充grid寬度            selModel: {                selType: 'cellmodel'            },            columns: [                { header: "DPId", dataIndex: 'DPId', width: 100, hidden: true },                { header: "StoreId", dataIndex: 'StoreId', width: 200, hidden: true },                { header: "門店編碼", dataIndex: 'DPCode', width: 100 },                { header: "門店名稱", dataIndex: 'DPName', width: 200 },                { header: "所在地區", dataIndex: 'LocationName', width: 200 },                { header: "交付周期", dataIndex: 'Leadtime', width: 100 },                { header: "廠商名稱", dataIndex: 'CompanyName', width: 200 },                { header: "廠商類型", dataIndex: 'CompanyTypeId', width: 100 },                { header: "門店類型", dataIndex: 'CompanyTypeName', width: 100 },                {                    header: '操作', align: 'left', width: 100, renderer:                    function (v, nv, v1) {                        var Update = "<img src='/Resources/Images/16x16/blue16_020.gif'></img>" + '<a href="#" onClick="FunctionActionUpdate()">修改</a>';                        var Delete = "<img src='/Resources/Images/16x16/blue16_013.gif'></img>" + '<a href="#" onClick="FunctionActionDelete()">刪除</a>';                        return Update + ' ' + Delete;                    }                }            ],            columnLines: true,            autoWidth: true,            autoHeight: true,            frame: false,            iconCls: 'icon-grid',            features: [{ ftype: 'grouping' }],            renderTo: renderId,            tbar: [               "->", {                   xtype: 'button', icon: '/Resources/Images/16x16/blue16_002.gif', text: "添加",                   handler: function () {                       win.show();                       win.setTitle('添加');                   }               }]        });        innerGrid.getEl().swallowEvent([                    'mousedown', 'mouseup', 'click',                    'contextmenu', 'mouSEOver', 'mouseout',                    'dblclick', 'mousemove'        ]);    }    function destroyInnerGrid(record) {        var parent = document.getElementById(record.get('StoreId'));        var child = parent.firstChild;        while (child) {            child.parentNode.removeChild(child);            child = child.nextSibling;        }    }    Ext.define('MainGrid', {        extend: 'Ext.grid.Panel',        alias: 'widget.MainGrid',        store: mainStore,             forceFit: true,//填充grid寬度        stripeRows: true,             columns: [                { header: "倉庫id", dataIndex: 'StoreId', width: 200, hidden: true },                { header: '序號', xtype: 'rownumberer', align: 'left', width: 100 },                { header: "倉庫編碼", dataIndex: 'StoreCode', width: 200 },                { header: "倉庫名稱", dataIndex: 'StoreName', width: 200 },                { header: "所在城市", dataIndex: 'City', width: 200 },        ],        autoWidth: true,        autoHeight: true,        selModel: {            selType: 'cellmodel'        },         plugins: [{            ptype: 'rowexpander',            rowBodyTpl: [                    '<div id="{StoreId}">',                    '</div>'            ]        }],        collapsible: true,        animCollapse: false,        title: '倉庫信息列表',        iconCls: 'icon-grid',        initComponent: function () {            var me = this;            this.callParent(arguments);        }    });    var mainGrid = new Ext.create('MainGrid');    mainGrid.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {        displayInnerGrid(record.get('StoreId'));    });    mainGrid.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {        destroyInnerGrid(record);    });    mainGrid.setHeight(window.innerHeight);    mainGrid.setWidth(window.innerWidth);    Ext.EventManager.onWindowResize(function () {        mainGrid.setHeight(window.innerHeight);        mainGrid.setWidth(window.innerWidth);    });    //**************頁面主體開始*****************    var tabpanel = Ext.createWidget('tabpanel', {        activeTab: 0,                       //指定默認的活動tab        height: '100%',        width: '100%',        minTabWidth: 115,        tabWidth: 135,        plain: true,                        //True表示tab候選欄上沒有背景圖片（默認為false）        enableTabScroll: true,              //選項卡過多時，允許滾動        defaults: { autoScroll: true },        items