删除与CheckboxModel在extjs4.1再次添加的GridPanel失败和4.2

Question

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

当我点击西部地区add按钮我removeAll从中心区域添加一些东西，在这个例子中，我添加和删除网格面板。我的电网板有CheckboxModel。而且，我不能删除后，我再次添加gridpanel。 按照下面的步骤你会看到bug。

1.运行我的应用程序，并单击按钮add
2.点击checkall butoon上的GridPanel
3.点击add按钮再次

现在你也会看到错误，选择是选中并且您不能点击checkall按钮进行工作。看起来像

我认为，当我点击添加按钮，然后中心区域将有一个新的GridPanel（新州）

如何修复感谢

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

您例如使用，因为您要添加不工作我的代码实例到原型和商店的实例，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(); 
    } 

});