ExtJs - 複選框選擇模型，禁用每行復選框

我有一個複選框選擇模型的網格。ExtJs - 複選框選擇模型，禁用每行復選框

Ext.define('Mb.view.ship.OrdersGrid', { 
    extend: 'Ext.grid.Panel', 
    selType: 'checkboxmodel', 
    selModel: { 
     injectCheckbox: 0, 
     pruneRemoved: false 
    }, 
    ...

根據字段中的值，有些行不能被選擇。

在一個正常的列中，我可以在顯示干預與renderer和隱藏與CSS（metadata.tdCls）單元格內容，但對於自動生成的複選框列，我無法找到行上禁用或隱藏的複選框的方法基礎。

有沒有人有一個想法如何做到這一點？

來源

2013-11-22 Lorenz Meyer

可能重複[ExtJS的併網禁用特殊排一些複選框（http://stackoverflow.com/questions/16975387/extjs-grid-disable-some-checkbox特殊行） – rixo

@rixo不，這不是一個重複的問題。在ExtJs中有一個列類型* checkcolumn *，並且有一個名爲* checkboxmodel *的選擇模型。我的問題是指後者，而另一個問題是指第一個問題。 –

你說得對，對不起，我沒有看到。 – rixo

您只需使用網格的beforeselect事件。返回false將不允許選擇。檢查the documentation。

Ext.define('Mb.view.ship.OrdersGrid', { 
    extend: 'Ext.grid.Panel', 
    selType: 'checkboxmodel', 
    selModel: { 
     injectCheckbox: 0, 
     pruneRemoved: false 
    }, 

    listeners: { 

     beforeselect: function(grid, record, index, eOpts) { 
      if (record.get('yourProperty')) {//replace this with your logic. 
       return false; 
      } 
     } 

} 
..........

如果你真的要隱藏的複選框，您可以添加CSS類爲網格行，並使用它們，你可以，可以隱藏起來。請檢查this answer獲取解決方案。

來源

2013-11-22 09:47:19

謝謝，這已經是部分解決方案。但用戶無法知道他是否可以不點擊而選擇。應該有一個視覺指示器來顯示是否可以進行選擇。 –

更新了我的答案。 –

是的，但如何設置複選框，使其處於「禁用」狀態？ –

CheckboxSelectionModel也有一個renderer。

var sm = new Ext.grid.CheckboxSelectionModel({ 
     checkOnly : true, 
     renderer : function(v,p,record) { 
     // First condition : show 
     if (record.data.XXX == 'YYYY') return '<div class="x-grid3-row-checker">&nbsp;</div>'; 
     // else hide 
     else return ''; 
    }, 
    header: '' 
});

https://www.sencha.com/forum/showthread.php?122496-How-to-hide-certain-checkbox-in-a-CheckboxSelectionModel

返回空''也不僅通過隱藏它還要加入unselectable="on"父DIV禁用複選框的選擇。

不知道在做一個Ext.define（從來沒有需要擴展），但似乎是可行的。

更新：儘管有unselectable="on"，點擊行（如果啓用）或使用標題複選框（全選）將選擇「禁用」行。那麼實現一個監聽器可能是一個好主意。

來源

2015-06-04 14:06:41 Daniel

在ExtJS 6覆蓋renderer將不是工作。

讓您可以通過定義viewConfig與getRowClass：

  getRowClass: function(record) { 
       var classes = ''; 
       if (!record.get('available')) { 
        classes += ' selection-disabled'; 
       } 
       return classes; 
      }

然後在你的CSS補充一點：

.selection-disabled .x-selmodel-column { 
    visibility: hidden; 
}

，將隱藏的選擇複選框。

現在通過單擊一行來禁用選擇使用標準方法。即添加beforeselect到listeners到selModel：中

 selModel: { 
      selType: 'checkboxmodel', 
      showHeaderCheckbox: false, 
      listeners: { 
       beforeselect: function(grid, record) { 
        if (!record.get('available')) { 
         return false; 
        } 
       } 
      } 
     },

來源

2017-04-12 17:51:49 Nux

很好的解決方法。謝謝 – andresarenasv

ExtJs - 複選框選擇模型，禁用每行復選框

回答

相關問題