Ext.grid.panel中WidgetColumn单选按钮列实现单选功能问询

我来帮你搞定这个单选只能选一行的需求～你现在的问题是每个单选按钮都是独立的，没有被归为同一组，所以浏览器允许同时选中多个。咱们只需要给所有单选按钮设置同一个name属性，再配合数据绑定和状态同步，就能实现需求了。

核心修改方案 #

直接修改你的widgetcolumn配置，主要做这几件事：

1. 给所有Radio设置相同的name，实现原生互斥
2. 把Radio的value绑定到行记录的ID（这样选中时能拿到对应条目的ID）
3. 监听单选按钮的change事件，同步更新store里的选中状态，保证数据一致性

修改后的完整代码示例 #

{
    xtype: 'widgetcolumn',
    bind: { text: 'Select topic' },
    dataIndex: 'defaultTopic',
    widget: {
        xtype: 'radio',
        simpleValue: true,
        // 关键：所有单选按钮用同一个name，实现互斥分组
        name: 'topic-selection-group',
        // 绑定单选按钮的值为当前行的ID（替换成你实际的ID字段名，比如topicId）
        bind: {
            value: '{record.id}',
            // 根据defaultTopic字段设置默认选中状态
            checked: '{record.defaultTopic}'
        },
        // 监听选中变化，同步更新所有记录的选中状态
        listeners: {
            change: function(radio, isChecked) {
                if (isChecked) {
                    const grid = radio.up('grid');
                    const store = grid.getStore();
                    const currentRecord = radio.getWidgetRecord();
                    
                    // 先把所有记录的defaultTopic设为false，取消之前的选中
                    store.each(record => {
                        record.set('defaultTopic', false);
                    });
                    // 把当前选中的记录设为true
                    currentRecord.set('defaultTopic', true);
                }
            }
        }
    }
}

关键细节说明 #

• name属性的作用：这是实现互斥的核心，浏览器会自动将同一name的单选按钮视为一组，同一时间只能选中其中一个。
• 数据绑定：value: '{record.id}'让单选按钮的值对应行的ID，后续你可以通过获取选中的Radio的value来拿到选中条目的ID；checked: '{record.defaultTopic}'则会根据store里的字段自动设置默认选中项。
• 状态同步：因为浏览器只会改变单选按钮的视觉状态，不会自动更新store里的defaultTopic字段，所以需要在change事件里手动遍历store，把其他记录的该字段设为false，当前记录设为true，这样表格的数据和视觉状态就保持一致了。

如果你的行数据ID字段不是id，记得把{record.id}改成你实际的字段名（比如{record.topicId}）就行啦～

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