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

我正在ExtJS中开发一个web应用程序。该应用程序是一个

网格

，其中一些网格行可以展开，以嵌套网格的形式显示补充信息。用户可以编辑父网格中的行

但我有问题。嵌套的

网格

通常是渲染的，但当我想更新其中一个字段时，嵌套网格将消失

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

代码（您可以在下面找到屏幕）

---

我想试试这个插件。它的目的是在rowexpander中插入任何组件，因此它也应该与网格一起工作。

您使用的是什么版本的Extjs？实际上我使用的是4.2.0，在Extjs 4.2.0中可以进行这种组合吗？可能是，我应该寻找其他变体吗？我建议不要像您那样在行中嵌入另一个网格，它看起来很难看，并且不是扩展行区域通常使用的功能。看看这里的例子——看看他们是否给了你一些想法，这些例子确实很棒。但是您给我的示例是由Ext.XTemplate创建的。我需要一个带有工具栏按钮的嵌套网格，例如，我可以通过单击“添加”按钮来添加新行。这是可以做到的，但当我添加行编辑插件时，事情就出了问题

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() {

        }
    })
});