extjs - 如何在 extjs 中正确组合 rowediting 和 rowexpander？

Question

我正在使用 ExtJS 开发网络应用程序。该应用程序是一个网格，其中可以扩展网格的一些行以将补充信息显示为嵌套网格。并且用户可以编辑父网格中的行。

但是我遇到了问题。嵌套的 grid 通常呈现，但是当我想更新其中一个字段时，嵌套的网格消失了。

有我的应用程序的测试版本和一些屏幕截图。

代码(您可以在下面找到屏幕)

Ext.onReady(function() {
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                    'name': 'Lisa',
                    "email": "lisa@simpsons.com",
                    "phone": "555-111-1224"
                },
                {
                    'name': 'Bart',
                    "email": "bart@simpsons.com",
                    "phone": "555-222-1234"
                },
                {
                    'name': 'Homer',
                    "email": "home@simpsons.com",
                    "phone": "555-222-1244"
                },
                {
                    'name': 'Marge',
                    "email": "marge@simpsons.com",
                    "phone": "555-222-1254"
                }
            ]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        plugins: [{
                ptype: 'rowexpander',
                pluginId: 'courseListGridExpander',
                expandOnDblClick: false,
                selectRowOnExpand: false,
                enableCaching: false,
                rowBodyTpl: ['']
            },
            Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToMoveEditor: 2,
                autoCancel: false

            })
        ],
        viewConfig: {
            listeners: {
                expandbody: function(rowNode, record, expandbody) {
                    var targetId = 'SessionInstructionGridRow';
                    if (Ext.getCmp(targetId + "_grid") == null) {
                        var sessionInstructionGrid = Ext.create('Ext.grid.Panel', {
                            renderTo: targetId,
                            id: targetId + "_grid",
                            title: 'Nested One',
                            columns: [{
                                    header: 'Halo',
                                    flex: 1
                                },
                                {
                                    header: 'Halo 2',
                                    flex: 1
                                }
                            ]
                        });
                        rowNode.grid = sessionInstructionGrid;
                        sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                        sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid, {
                            ClientSessionId: record.get('ClientSessionId')
                        });
                    }
                },
                celldblclick: function(gr, td, cellIndex, record) {
                    //alert("@@@");
                }
            }
        },

        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
                text: 'Name',
                dataIndex: 'name',
                editor: {
                    allowBlank: false
                }
            },
            {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            },
            {
                text: 'Phone',
                dataIndex: 'phone'
            }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });

    Ext.create('Ext.button.Button', {
        text: 'Hello',
        handler: function() {

        }
    })
});

Answer 1

我会给ComponentRowExpander插件一试。它旨在将任何组件插入 rowexpander - 因此它也应该适用于网格。