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 - 复选框选择模型，禁用每行复选框

回答

相关问题