在Ext Js復選框模型中禁用Checbox

Question

我有帶有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;
}

一切正常，只有一個問題是標題復選框不起作用，即無法從標題中取消全選並且能夠選擇但未被選中

這是我的工作小提琴

Ext JS版本5

Answer 1

在功能出現問題updateHeaderState中的Ext.selection.CheckboxModel 。 該函數檢查是否通過hdSelectStatus = storeCount === selectedCount;選中了所有復選框hdSelectStatus = storeCount === selectedCount; 。 在您的情況下，selectedCount與storeCount不匹配，並且標題復選框的狀態未更新。

你可以擴展Ext.selection.CheckboxModel並覆蓋updateHeaderState功能，以滿足您的需求。

Answer 2

擴展And-y的答案，我將構建自己的類，並在此Fiddle中進行類似的操作。 我確實添加了一些內容，例如模型中的isDisabled標志，但我認為這並不是一件壞事，這對決定如何顯示復選框/修復“全部選中”復選框邏輯有很大幫助。

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