如何通过监听器禁用网格同一行的Checkbox？

你当前的代码会禁用整个FUN2列的所有复选框，因为Ext.getCmp('fun2').disable()操作的是整个列组件，而非单独的行元素。要实现仅禁用当前勾选行的FUN2复选框，可以通过以下两种方式处理：

方式一：在checkchange事件中直接操作DOM元素 #

利用checkchange事件提供的record参数定位当前行，找到对应FUN2列的复选框元素并设置禁用状态：

onFunChecked: function(column, record, checked) {
    // 仅处理FUN列的勾选事件
    if (column.dataIndex !== 'FUN') return;

    var gridView = column.up('grid').getView();
    var rowEl = gridView.getRow(record);
    // 定位当前行的FUN2复选框元素
    var fun2Checkbox = rowEl.querySelector('[data-index="FUN2"] .x-grid-checkcolumn');

    if (checked) {
        // 勾选FUN时，禁用FUN2复选框
        fun2Checkbox.classList.add('x-item-disabled');
        fun2Checkbox.style.pointerEvents = 'none';
        // 可选：给record添加标记，用于后续状态判断
        record.set('isFun2Disabled', true);
    } else {
        // 取消勾选FUN时，恢复FUN2复选框可用
        fun2Checkbox.classList.remove('x-item-disabled');
        fun2Checkbox.style.pointerEvents = '';
        record.set('isFun2Disabled', false);
    }
}

方式二：通过列的renderer函数控制状态 #

在FUN2列的renderer中，根据当前行FUN字段的勾选状态动态设置禁用样式，这种方式更符合ExtJS的组件渲染逻辑：

首先修改FUN2列的配置：

xtype:'checkcolumn',
dataIndex:'FUN2',
id:'fun2',
listeners:{checkchange:'onFunChecked'},
renderer: function(value, metaData, record) {
    // 根据FUN字段的状态决定是否禁用当前行的FUN2复选框
    if (record.get('FUN')) {
        metaData.tdCls += ' x-item-disabled';
        metaData.tdAttr = 'style="pointer-events:none;"';
    } else {
        // 移除禁用样式（避免复用行时状态残留）
        metaData.tdCls = metaData.tdCls.replace(' x-item-disabled', '');
        metaData.tdAttr = '';
    }
    // 返回复选框的原始值
    return value;
}

然后在onFunChecked事件中，只需要刷新当前行的视图即可触发renderer重新计算状态：

onFunChecked: function(column, record, checked) {
    if (column.dataIndex === 'FUN') {
        // 刷新当前行视图，触发renderer更新
        column.up('grid').getView().refreshNode(record);
    }
}

两种方式都能实现仅禁用当前勾选行的FUN2复选框，方式二更适合复杂场景下的状态维护，避免直接操作DOM带来的兼容性问题。

内容的提问来源于stack exchange，提问作者Honey Singh