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

Question

我正在 ExtJS 中开发一个Web应用程序。应用程序是grid，其中某些网格行可以展开，以显示作为嵌套网格的补充信息。用户可以编辑父网格中的行。

但我有问题。嵌套的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中插入任何组件 - 因此它也应该与网格一起使用。