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: [{
            id: "tab1",
            title: '配送点设置',
            icon: '/Resources/Images/16x16_Classic/20101204100142490_easyicon_cn_16.png',
            items: mainGrid,
            closable: true                  //这个tab可以被关闭
        }, {
            id: "tab2",
            title: '配送点详情',
            icon: '/Resources/Images/16x16_Classic/20101204100142490_easyicon_cn_16.png',
            html: "这只是一个非常普通的Tab。",
            items: [{ xtype: 'button', text: '按钮' }],
            closable: true                  //这个tab可以被关闭
        }]
    });
    //**************页面主体结束*****************
    var panel = new Ext.Viewport({
        border: false,
        layout: 'border',
        items: [
        {
            region: 'center',
            border: false,
            layout: 'fit',
            items: tabpanel
        }]
    });
}

html：

<body>
    <div>
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.QuickTips.init();
                DistributionPointForm();
            });
        </script>
    </div>
</body>