使用extjs4.1和4.2中的CheckboxModel再次删除并添加Gridpanel失败

Question

我有一个layout: border的小组，看起来像 http://jsfiddle.net/rpcbX/

当我从中心区域点击西区I add按钮removeAll并再次添加内容时，在此示例中我添加并删除了gridpanel。

但我的网格面板有CheckboxModel。再次添加gridpanel后无法删除。 按照下面的步骤你会看到bug。

1。运行我的应用并点击add按钮
2。点击网格面板上的checkall按钮
3. 再次点击add按钮

现在你将看到错误，选择了选项，你无法点击checkall按钮工作。看起来像

我认为当我点击添加按钮时，中心区域将有一个新的网格面板（新状态）

如何解决这个问题

p / s：我在extjs4.2.1上测试过，结果更糟。我无法点击行上的复选框（我想我点击了那个但图片没有改变）

以下是我使用add按钮

的代码

                text: 'add',
                handler: function() {
                    panel.down('panel[region="center"]').removeAll();
                    var grid = new Example();
                    panel.down('panel[region="center"]').add(grid);
                }

Answer 1

您的示例不起作用，因为您要向原型和store的实例添加实例，selModel可能的列将在Example的所有实例之间共享。你的例子正在达到未定义的行为。原型上的非原语通常是一件坏事，由于某种原因，我在stackoverflow上看到它们很多。 Here是一个更深入的解释。

为Example执行此操作可以帮助您解决问题。

Ext.define('Example', {
    extend: 'Ext.grid.Panel',
    title: 'Simpsons',
    initComponent: function() {
        Ext.apply(this, {
            selModel: Ext.create('Ext.selection.CheckboxModel', {
                checkOnly: true,
                mode: 'MULTI'
            }),
            store: Ext.create('Ext.data.Store', {
                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'
                    }
                }
            }),
            columns: [{
                    header: 'Name',
                    dataIndex: 'name',
                    editor: {
                        xtype: 'textfield'
                    }
                }, {
                    header: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    header: 'Phone',
                    dataIndex: 'phone'
                }
            ]
        });

        this.callParent();
    }

});