如何在extjs中正确地将rowediting和rowexpander结合在一起?

我正在ExtJS中开发一个Web应用程序。 该应用程序是一个grid ,其中一些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() {

        }
    })
});

嵌套网格正常加载

当我更新行我的嵌套网格消失


我会尝试使用ComponentRowExpander插件。 它的目的是在rowexpander中插入任何组件 - 所以它也应该与网格一起工作。

链接地址: http://www.djcxy.com/p/67645.html

上一篇: How to combine rowediting and rowexpander together correctly in extjs?

下一篇: How to set an extjs grid record phantom to true