在 Extjs checkboxmodel 中禁用复选框答案

【问题标题】：Disable Checbox in Ext Js checkbox model在 Extjs checkboxmodel 中禁用复选框
【发布时间】：2017-03-22 15:24:24
【问题描述】：

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

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

一切正常，只有一个问题是标题复选框不起作用，即无法从标题中取消selectAll并且能够选择但没有被检查

这是我的工作fiddle

Ext js 版本 5

【问题讨论】：

标签： javascript extjs extjs5

【解决方案1】：

扩展 And-y 的答案，我将构建自己的课程并在此 Fiddle 中执行类似的操作。我确实添加了一些东西，例如模型中的 isDisabled 标志，但我不认为这是一件坏事，它极大地有助于决定如何显示复选框/修复 Check All 复选框逻辑。

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()
        });
    }
});

【讨论】：

【解决方案2】：

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

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

【讨论】：