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