ExtJs

Question

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

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

我的问题是通过单击 header 列中的复选框清除所有选择不起作用。在这个 link 我看到 costa 遇到了和我一样的问题：ExtJs - Checkbox selection model, disable checkbox per row.

此侦听器有效，但它会中断复选框清除。

代码：

xtype: 'grid',
border: false,

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

colums:[
....
],
....

有人知道怎么做吗？

谢谢。

Answer 1

header 复选框只有在所有记录都被选中时才会被选中。在您的情况下，不可能检查所有记录 => header 复选框永远不会被选中 => 不可能取消选中。要实现新逻辑，您可以扩展复选框模型并使用自定义逻辑编写您自己的模型（通过覆盖 updateHeaderState 方法）。像这样：

Ext.define('CustomCheckboxModel', {
    alias: 'selection.custom_checkboxmodel',
    extend: 'Ext.selection.CheckboxModel',

    allowDeselect: true,

    updateHeaderState: function () {
        // check to see if all records are selected
        var me = this,
            store = me.store,
            storeCount = store.getCount(),
            views = me.views,
            hdSelectStatus = true,
            selectedCount = 0,
            selected, len, i;

        if (!store.isBufferedStore && storeCount > 0) {
            selected = me.selected;
            hdSelectStatus = true;

            store.each(function (record) {
                if (!record.get('supplier')) {
                    return true;
                }
                var found = false;
                for (i = 0, len = selected.getCount(); i < len; ++i) {
                    if (record.getId() == selected.getAt(i).id) {
                        found = true;
                        break;
                    }
                }
                if (!found) {
                    hdSelectStatus = found;
                    return false;
                }
            }, this);
        }

        if (views && views.length) {
            me.column.setHeaderStatus(hdSelectStatus);
        }
    },
});

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224',
                supplier: true
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234',
                supplier: false
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244',
                supplier: true
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254',
                supplier: false
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: store,
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }, {
                xtype: 'checkcolumn',
                text: 'Supplier',
                dataIndex: 'supplier'
            }],
            height: 400,
            renderTo: Ext.getBody(),
            selModel: {
                selType: 'custom_checkboxmodel',
                listeners: {
                    beforeselect: function (selectionCheckboxModel, record, index, eOpts) {
                        console.log(record);
                        if (!record.get('supplier')) {
                            return false;
                        }
                        return true;
                    }
                }
            }
        });

    }
});

ExtJs - 复选框选择模型，每行禁用复选框并丢失清除所有选择

ExtJs - Checkbox selection model, disable checkbox per row and lose clearing all the selections

checkbox

sencha-architect