在 Extjs 复选框模型中禁用复选框

Question

我有带有 checkboxmodel 的网格，根据我的要求，我必须禁用复选框模型中的某些复选框并将用户限制为 select 该行。我能够实现以下代码。

        viewConfig: {
            getRowClass: function (record, rowIndex, rowParams, store) {
                return record.data.name == 'Lisa' ? 'bg' : "";
            }
        },
        listeners: {
          beforeselect: function ( test , record , index , eOpts ) {
              return record.data.name == "Lisa" ? false : true;
          }
        }

上面的配置是在网格中使用的，下面是我的 css

.bg .x-grid-cell-row-checker{
     background-color: grey;
     pointer-events: none;
     opacity: 0.4;
}

一切正常，只有一个问题是 header 复选框不起作用，即无法从 header 中删除 select 并且能够 select 但未被选中

这是我的作品fiddle

Ext js 版本 5

Answer 1

问题出现在 Ext.selection.CheckboxModel 的函数 updateHeaderState 中。该函数检查 hdSelectStatus = storeCount === selectedCount; 是否选中了所有复选框。在您的情况下，selectedCount 与 storeCount 不匹配，并且 header 复选框的状态未更新。

您可以扩展 Ext.selection.CheckboxModel 并覆盖 updateHeaderState 函数以满足您的需要。

Answer 2

扩展 And-y 的回答，我将构建自己的 class 并在 Fiddle 中做类似的事情。我确实添加了一些东西，比如模型中的 isDisabled 标志，但我不认为这是一件坏事，它极大地帮助决定如何显示 checkbox/fixing 全部检查复选框逻辑。

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('MySelectionModel', {
            extend: 'Ext.selection.CheckboxModel',
            alias: 'selection.mySelectionModel',
            // default
            disableFieldName: 'isDisabled',
            listeners: {
                beforeselect: function (test, record, index, eOpts) {
                    return !record.get(this.disableFieldName);
                }
            },
            renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                if (record.get(this.disableFieldName)) {
                    metaData.tdCls = 'bg';
                }
                else {
                    return this.callParent(arguments);
                }
            },
            updateHeaderState: function () {
                // check to see if all records are selected
                var me = this,
                    store = me.store,
                    storeCount = store.getCount(),
                    views = me.views,
                    hdSelectStatus = false,
                    selectedCount = 0,
                    selected, len;
                var disableFieldName = me.disableFieldName;

                if (!store.isBufferedStore && storeCount > 0) {
                    selected = me.selected;
                    hdSelectStatus = true;
                    // loop over all records
                    for (var i = 0, j = 0; i < storeCount; i++) {
                        var rec = store.getAt(i);
                        var selectedRec = selected.getAt(j);
                        // Check selection collection for current record
                        if (selectedRec && selected.indexOf(rec) > -1) {
                            ++selectedCount;
                            // Increment selection counter
                            j++;
                        }
                        // Otherwise, automatically consider disabled as part of selection
                        else if (rec.get(disableFieldName)) {
                            ++selectedCount;
                        }
                    }
                    hdSelectStatus = storeCount === selectedCount;
                }

                if (views && views.length) {
                    me.toggleUiHeader(hdSelectStatus);
                }
            }
        });
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone', 'isDisabled'],
            data: {
                'items': [{
                    'name': 'Lisa',
                    isDisabled: true,
                    "email": "lisa@simpsons.com",
                    "phone": "555-111-1224"
                }, {
                    'name': 'Bart',
                    "email": "bart@simpsons.com",
                    "phone": "555-222-1234"
                }, {
                    'name': 'Homer',
                    "email": "homer@simpsons.com",
                    "phone": "555-222-1244"
                }, {
                    'name': 'Marge',
                    "email": "marge@simpsons.com",
                    "phone": "555-222-1254"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            selModel: {
                selType: "mySelectionModel",
                showHeaderCheckbox: true,
                mode: 'MULTI',
                allowDeselect: true,
                toggleOnClick: false,
                checkOnly: false
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});

在 Extjs 复选框模型中禁用复选框

Disable Checbox in Ext Js checkbox model

javascript

extjs

extjs5