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

您只需使用beforeselect网格事件即可.返回false,将不允许选择.查看文档.

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类,并使用它们可能会隐藏它们.检查此答案以获得解决方案.

Answer 2

在ExtJS的6重写renderer将不会工作。

你可以通过定义viewConfiggetRowClass来解决这个问题：

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