ExtJs - 复选框选择模型，每行禁用复选框

Question

我有一个带有复选框选择模型的网格。

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

根据字段中的值，有些行是不可选择的。

在普通列中，我可以用renderer干预显示并用css（metadata.tdCls）隐藏单元格内容，但是对于自动生成的复选框列，我找不到禁用或隐藏复选框的方法以行为基础。

有人知道怎么做吗？

Answer 1

在 ExtJS 6 中，覆盖 renderer 将不工作。

您可以通过使用 getRowClass 定义 viewConfig 来解决这个问题：

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

然后在你的 CSS 中添加：

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

这将隐藏选择复选框。

现在要通过单击一行来禁用选择，请使用标准方法。 IE。将beforeselect 添加到listeners 到selModel：

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

Answer 2

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"，但单击行（如果启用）或使用标题复选框（全选）将选择“禁用”行。那么实现一个监听器可能是个好主意。

Answer 3

您只需使用网格的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 以获得解决方案。