分機js網格刪除選擇模型

Question

我有一種情況，我需要動態添加或刪除網格選擇模型。

搜索文檔我發現選擇模型沒有destroy()方法或類似的東西。如何從ext js 4.x.中的網格中刪除或銷燬選擇模型？

如果這是不可能的，我仍然可以選擇恢復一些功能，並動態地將選擇模型添加到已經創建的網格。但我也不確定這是否可能。

Answer 1

我建議禁用選擇模型而不是銷燬它。

您可以清除當前的選擇（deselectAll）並鎖定選擇模型，以防止進一步的選擇（setLocked）：

selModel.deselectAll(); 
selModel.setLocked(true); 

當你使用複選框選擇模型，您還需要隱藏這是添加到網格中的相應列：

grid.headerCt.child('gridcolumn[isCheckerHd]').hide(); 

Answer 2

選擇模型不是設計來代替，所以......這會是複雜！

你不得不重現SEL模型的初始化，無線化以前的一個，並重新連接新一...

下面是一個example，在一個複選框模型代替行選擇樣板工程。它可能仍然包含來自第一選擇模型註冊的監聽器的內存泄漏，我會忘記它。新選擇模型的創建依賴於網格的getSelectionModel方法，該方法實現網格的disableSelection,simpleSelect和multiSelect選項（see the code）。

Ext.widget('grid', { 
    renderTo: Ext.getBody() 
    ,store: ['Foo', 'Bar', 'Baz'] 
    ,selType: 'checkboxmodel' 
    ,columns: [{ 
     dataIndex: 'field1' 
     ,text: "Name" 
    }] 
    ,listeners: { 
     selectionchange: function(sm, records) { 
      var grid = sm.view.up(), 
       item = grid.down('tbtext'); 
      if (records.length) { 
       item.setText(
        'Selection: ' + Ext.pluck(Ext.pluck(records, 'data'), 'field1').join(', ') 
       ); 
      } else { 
       item.setText('No selection'); 
      } 
     } 
    } 
    ,tbar: [{ 
     text: "Replace selection model" 
     ,handler: function(button) { 
      var grid = button.up('grid'), 
       headerCt = grid.headerCt, 
       checkColumn = headerCt.down('[isCheckerHd]'), 
       view = grid.view, 
       previous = grid.selModel, 
       sm; 
      // try to clean up 
      previous.deselectAll(); 
      previous.destroy(); 
      // sel model doesn't clear the listeners it has installed in its 
      // destroy method... you'll have to chase the listeners that are 
      // installed by the specific type of sel model you're using 
      if (previous.onRowMouseDown) { 
       view.un('itemmousedown', previous.onRowMouseDown, previous); 
      } 
      if (previous.onRowClick) { 
       view.un('itemclick', previous.onRowClick, previous); 
      } 
      // clear references 
      delete grid.selModel; 
      delete view.selModel; 
      // create another selModel 
      grid.selType = 'rowmodel'; 
      //grid.disableSelection = true; 
      sm = grid.getSelectionModel(); 
      // assign new sel model 
      view.selModel = sm; 
      sm.view = view; 
      // remove checkbox model column 
      if (checkColumn) { 
       headerCt.remove(checkColumn); 
      } 
      // init sel model is trigerred in view render events, so we must do it 
      // now if the view is already rendered 
      if (view.rendered) { 
       sm.beforeViewRender(view); 
       sm.bindComponent(view); 
      } 
      // finally, refresh the view 
      view.refresh(); 
     } 
    }] 
    // a place to display selection 
    ,bbar: [{ 
     xtype: 'tbtext' 
     ,text: 'No selection' 
    }] 
});