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

Question

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

当我点击add对西部地区我按钮， removeAll从中心区域，然后再添加一些东西，在这个例子中我添加和删除的GridPanel。

但是我的gridpanel有CheckboxModel 。 而且在我再次添加gridpanel之后无法删除。 按照下面的步骤，您将看到错误。

1.运行我的应用程序，然后单击add按钮
2.单击gridpanel上的checkall butoon
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

您的example无效，因为您要向原型中添加实例，而store的那些实例，则selModel可能会在Example所有实例之间共享列。 您的示例遇到未定义的行为。 原型上的非基元通常是一件坏事，由于某种原因，我在stackoverflow上经常看到它们。 这是更深入的解释。

以此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();
    }

});