Question

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

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

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

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

有没有人知道如何做到这一点？

Answer 1

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

Answer 2

在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;
}

这将隐藏选择复选框。

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

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

Answer 3

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"，但点击该行（如果已启用）或使用标题复选框（select-all）将选择＆＃34;禁用＆＃34;行。那么实现一个监听器可能是个好主意。

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

3 个答案: