刪除與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(); 
    } 

});