ExtJS 4带网格的行扩展器

nr9pn0ug  于 2022-11-04  发布在  其他
关注(0)|答案(2)|浏览(153)

我如何解决网格行扩展器与子网格?获取值作为纯文本工作正常。
有没有什么方法可以在Grid中创建Grid,以便从JSON数据中获取值?
我想使用MVC架构创建此结构。

Ext.define('CSApp.view.ContentGrid',
{
 extend: 'Ext.grid.Panel',
 store: 'Details',
 width: 840,
 height:45,
 initComponent: function()
 {
 this.columns = [
 {header: 'TASK ID', dataIndex: 'taskID', flex:1},
 {header: 'ITEM', dataIndex: 'name', flex:1},
 {header: 'EXISTING VALUE', dataIndex: 'value', flex:1},
 {header: 'NEW VALUE', dataIndex: 'newValue', flex:1}];
 this.callParent(arguments);
 }
});
rekjcdws

rekjcdws1#

我也遇到过类似的情况:一个客户列表,其中包含他们自己的记录数据(地址、电话、帐户余额等)。每个客户都有一个帐户,其中包含一组“已支付”的项目。换句话说,我需要一个客户网格,可以将其行展开以打开他们自己的“帐户网格”,其中显示了项目网格以及项目的相关数据,以及他们支付了多少等。
我精简了一堆不相关的配置和其他代码,但这里有一个我用于“外部”网格的视图示例:

Ext.define('MyApp.view.CustomerGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.customergrid',
    requires: [
        'Ext.ux.RowExpander'
    ],
    title: 'Customer Grid',
    plugins: [{
        ptype: 'rowexpander',
        pluginId: 'rowexpander',
        selectRowOnExpand: true,

        // this gives each row a unique identifier based on record's "acct_no"
        rowBodyTpl: [
            '<div id="AccountGridRow-{acct_no}" ></div>'
        ],

        // stick a grid into the rowexpander div whenever it is toggled open
        toggleRow: function(rowIdx) {
            var rowNode = this.view.getNode(rowIdx),
                row = Ext.get(rowNode),
                nextBd = Ext.get(row).down(this.rowBodyTrSelector),
                hiddenCls = this.rowBodyHiddenCls,
                record = this.view.getRecord(rowNode),
                grid = this.getCmp(),
                acctNo = record.get('acct_no'),
                targetId = 'AccountGridRow-' + acctNo;

            if (row.hasCls(this.rowCollapsedCls)) {
                row.removeCls(this.rowCollapsedCls);
                this.recordsExpanded[record.internalId] = true;
                this.view.fireEvent('expandbody', rowNode, record, nextBd.dom);

                if (rowNode.grid) {
                    nextBd.removeCls(hiddenCls);
                    rowNode.grid.doComponentLayout();
                    rowNode.grid.view.refresh();
                } else {

                    // this is the store for the inner grid
                    Ext.create('Ext.data.Store', {
                        model: 'MyApp.model.Account',
                        proxy: {
                            type: 'ajax', 
                            url: 'customers',
                            reader: 'json'
                            extraParams: {
                                account: acctNo
                            }
                        },
                        autoLoad: {
                            callback: function() {

                                // create the inner grid and render it to the row
                                nextBd.removeCls(hiddenCls);
                                var grid = Ext.create('MyApp.view.AccountGrid', { // <-- this is my "inner" grid view
                                        renderTo: targetId,
                                        store: this,
                                        row: row
                                    });

                                rowNode.grid = grid;

                                // I didn't want to listen to events from the inner grid
                                grid.suspendEvents(); 
                            }
                        }
                    });
                }

            } else {
                row.addCls(this.rowCollapsedCls);
                nextBd.addCls(this.rowBodyHiddenCls);
                this.recordsExpanded[record.internalId] = false;
                this.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
            }
        }
    }],
    columns: [/* a bunch of column configs for the outer grid... */],
    store: Ext.getStore('StudentList') // <-- the outer grid store

});

基本上,我只是覆盖了toggleRow函数,将另一个网格(MyApp.view.AccountGrid)粘贴到rowexpander div中。
这工作得很好,应用程序现在已经完成。
我在缓存对象中有内部“account”网格的数据,这样 AJAX 在50 - 100 ms内返回。如果您有某种长查询来获取内部网格数据,我可以看到这是不可行的。

1hdlvixo

1hdlvixo2#

RowExpander不允许嵌套网格结构。它只允许在行主体中插入任何HTML。这意味着您可以在展开的行中创建HTML表,但它不是另一个Ext Grid。

相关问题