ExtJS 6.5中如何绑定Ext.grid.Panel的combo并控制同行列组件状态

嘿，我完全懂你遇到的坑——直接操作列的hidden或disabled属性会影响整列所有下拉框，这是因为列配置是全局作用于每一行的。要实现仅控制当前行的最后一列下拉框，得从行级数据绑定入手，让每行的状态由对应的record字段来驱动，具体方案如下：

核心思路 #

1. 给你的Store添加一个行级状态字段（比如lastComboDisabled或lastComboHidden），用来单独记录每行最后一列下拉框的状态；
2. 在第一列下拉框的change事件中，获取当前行对应的Record，更新这个状态字段；
3. 最后一列的下拉框通过数据绑定，关联到Record的状态字段，实现行级独立控制。

完整示例代码 #

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        // 新增行级状态字段，用来控制最后一列下拉框的禁用/隐藏
        fields: ['name', 'email', 'phone', 'hungry1', 'lastComboDisabled'],
        data: [
            { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224', hungry1: '', lastComboDisabled: false },
            { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234', hungry1: '', lastComboDisabled: false },
            { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244', hungry1: '', lastComboDisabled: false },
            { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254', hungry1: '', lastComboDisabled: false }
        ]
    }),
    columns: [
        {
            header: 'Hungry1',
            xtype: 'widgetcolumn',
            width: 150,
            widget: {
                xtype: 'combo',
                store: ['Yes', 'No'],
                displayField: 'text',
                valueField: 'value',
                listeners: {
                    change: function(combo, newValue) {
                        // 获取当前行对应的Record，确保只修改当前行的状态
                        var record = combo.up('widgetcolumn').getWidgetRecord(combo);
                        // 根据选择的值设置状态：比如选Yes禁用最后一列，选No则启用
                        record.set('lastComboDisabled', newValue === 'Yes');
                    }
                }
            }
        },
        // 中间省略其他列...
        {
            header: 'Last Combo',
            xtype: 'widgetcolumn',
            width: 150,
            widget: {
                xtype: 'combo',
                store: ['Option 1', 'Option 2', 'Option 3'],
                displayField: 'text',
                valueField: 'value',
                // 通过数据绑定，将禁用状态关联到当前行Record的字段
                bind: {
                    disabled: '{record.lastComboDisabled}',
                    // 如果要控制隐藏，替换成 hidden: '{record.lastComboHidden}'
                }
            }
        }
    ],
    height: 400,
    width: 600,
    renderTo: Ext.getBody()
});

关键细节说明 #

• 行级状态字段：通过给Store添加专属字段，让每行拥有独立的状态标识，彻底避免全局操作影响所有行；
• 精准获取当前行Record：在第一列下拉框的change事件中，用getWidgetRecord(combo)拿到当前行的Record，确保状态修改只作用于当前行；
• 数据绑定驱动UI：最后一列下拉框用bind配置关联Record字段，当字段值变化时，只有当前行的下拉框会更新状态，完全不会影响其他行。

如果你的Grid用的是cellediting插件（而非widgetcolumn），只需要在编辑器的change事件中，通过editingContext.record获取当前Record，其余逻辑保持一致即可。

内容的提问来源于stack exchange，提问作者Danescu Catalin-Constantin