6

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

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

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

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

有谁知道如何做到这一点？

4

3 回答 3

9

您只需使用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 类，使用它们你可以隐藏它们。检查此答案以获取解决方案。

于 2013-11-22T09:47:19.777 回答
5

在 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到：listenersselModel

        selModel: {
            selType: 'checkboxmodel',
            showHeaderCheckbox: false,
            listeners: {
                beforeselect: function(grid, record) {
                    if (!record.get('available')) {
                        return false;
                    }
                }
            }
        },
于 2017-04-12T17:51:49.773 回答
1

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-04T14:06:41.330 回答