javascript - 多级行扩展网格

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 中按行扩展制作多级网格。

我正在尝试做的是在 inner 中再添加一个网格，但没有得到。

Answer 1

使用 RowWidget插件而不是行扩展器。你给它一个 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()
        })
    }
});

在 Sencha Fiddle 上查看实际效果.

设置嵌套网格的正确高度很麻烦。也许可以在事件监听器中处理此问题。