Многоуровневая сетка расширителя строк

Question

Я создаю сетку, которая должна быть многоуровневой. Поэтому, когда я использую static, я могу получить это, вот код, который работает в fiddler.

Ext.create('Ext.data.Store', {
    storeId:'nestedStore1',
    fields:['productid', 'productName', 'qty'],
    data:{'items':[
        { 'productid': 'pr-1',  "productName":"Orange",  "qty":"5"  },
        { 'productid': 'pr-2',  "productName":"Apple",  "qty":"6" },
        { 'productid': 'pr-3', "productName":"papaya",  "qty":"3"  },
        { 'productid': 'pr-4', "productName":"Mango", "qty":"9"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});

Ext.create('Ext.data.Store', {
    storeId:'orderstore',
    fields:['orderid', 'amt', 'date'],
    data:{'items':[
        { 'orderid': 'O12',  "amt":"1000",  "date":"29/05/2015"  },
        { 'orderid': 'O121',  "amt":"1200",  "date":"29/05/2015" },
        { 'orderid': 'O122', "amt":"1100",  "date":"29/05/2015"  },
        { 'orderid': 'O123', "amt":"900", "date":"29/05/2015"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});

Ext.define('EkaTRM.view.base.grid.ContractPanelGrid',{
    extend:'Ext.grid.Panel',
    alias:'widget.contractpanelgrid',
    requires:['Ext.grid.Panel','EkaTRM.view.base.grid.RowExpanderGrid'],
    title: 'Contract Application',
    autoHeight: true,
    store: Ext.data.StoreManager.lookup('orderstore'),
    columns: [
        { text: 'Order Id',  dataIndex: 'orderid' },
        { text: 'Amount', dataIndex: 'amt', flex: 1 },
        { text: 'Date', dataIndex: 'date' }
    ],
    plugins:[{
        ptype: 'rowexpandergrid',
        gridConfig: [{
            store: 'nestedStore1',
            columns: [
                { text: "Product ID", dataIndex: 'productid' ,menuDisabled : false,resizable:true,editor:'textfield'},
                { text: "Product Name", dataIndex: 'productName' ,menuDisabled : true,resizable:false,editor:'textfield'},
                { text: "Qty", dataIndex: 'qty' ,menuDisabled : true,resizable:false,editor:'numberfield'}
            ],
            columnLines: false,
            border: true,
            autoWidth: true,
            autoHeight: true,
            frame: false,
            header: false,
            plugins:[{
                ptype: 'rowexpandergrid',
                gridConfig: [{
                    store: 'nestedStore1',
                    columns: [
                        { text: "Product ID", dataIndex: 'productid' ,menuDisabled : false,resizable:true,editor:'textfield'},
                        { text: "Product Name", dataIndex: 'productName' ,menuDisabled : true,resizable:false,editor:'textfield'},
                        { text: "Qty", dataIndex: 'qty' ,menuDisabled : true,resizable:false,editor:'numberfield'}
                    ],
                    columnLines: false,
                    border: true,
                    autoWidth: true,
                    autoHeight: true,
                    frame: false,
                    header: false
                }]
            }]
        }]
    }]

});

Теперь я хочу сделать его динамичным. Так что я делаю, я добавляю

plugins  : [{
        ptype  : 'rowexpandergrid',
        gridConfig: [{
            columns:[]
        }]
    }], 

В моей сетке и при расширении я добавляю другую сетку. Вот код расширения.

init:function(nestedGrid){
        var me = this;
        this.callParent(arguments);
        nestedGrid.getView().on('expandbody',me.addInnerGridOnExpand,me);
    },

 addInnerGridOnExpand : function (rowNode, record, expandRow, eOpts) {
        var me=this;
        if( Ext.fly(rowNode).down('.x-grid-view')){
            return;
        }
        var parentGrid = this.getCmp();
        me.recordsExpanded[record.internalId] = false;
        var detailData = Ext.DomQuery.select("div.detailData", expandRow);
        var innerGrid=Ext.create('Ext.grid.Panel',
            me.gridConfig[0],
         );

         innerGrid.setColumns(parentGrid.Column);
        innerGrid.getStore().loadData(SalesStore);
        innerGrid.render(detailData[0]);
    },

Теперь это нормально работает для одного уровня. Теперь я хочу, чтобы вторая сетка также была расширяемой. Я застрял здесь. Любая помощь, как сделать многоуровневую сетку путем расширения строки в extJS.

Вот что я пытаюсь сделать, это добавить еще одну сетку во внутреннюю, но не получаю ее.

Answer 1

Используйте плагин RowWidget вместо rowexpander. Вы предоставляете ему конфигурацию widget, которая станет телом развернутых строк.

Ext.create('Ext.data.Store', {
    storeId: 'orderstore',
    fields: ['orderid', 'amt', 'date'],
    data:[
        { 'orderid': 'O12',  "amt":"1000",  "date":"29/05/2015"  },
        { 'orderid': 'O121',  "amt":"1200",  "date":"29/05/2015" },
        { 'orderid': 'O122', "amt":"1100",  "date":"29/05/2015"  },
        { 'orderid': 'O123', "amt":"900", "date":"29/05/2015"  }
    ]
});

Ext.define('EkaTRM.view.base.grid.ContractPanelGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.contractpanelgrid',
    title: 'Contract Application',
    minHeight: 100,
    //maxHeight: 600,
    autoHeight: true,
    scrollable: true,
    store: 'orderstore',
    viewConfig: {
        scrollable: true,
        reserveScrollbar: true
    },
    columns: [
        { text: 'Order Id',  dataIndex: 'orderid' },
        { text: 'Amount', dataIndex: 'amt', flex: 1 },
        { text: 'Date', dataIndex: 'date' }
    ],
    plugins: [{
        ptype: 'rowwidget',
        widget: {
            xtype: 'contractpanelgrid'
        }
    }]

});

Ext.application({
    name: 'Fiddle',
    launch: function () {
        parent.grid = grid = Ext.create('EkaTRM.view.base.grid.ContractPanelGrid', {
            height: innerHeight,
            renderTo: Ext.getBody()
        })
    }
});

Смотрите его в действии на Сенча-скрипка .

Нелегко установитьправильная высота вложенных сеток. Может быть, это можно обработать в прослушивателе событий.