Ext js: радиогруппа в столбце виджетов

Question

В Ext.grid.panel я загружаю список содержимого в виде строк с несколькими столбцами. Я хотел бы, чтобы пользователь мог выбрать только одну из этих строк через столбец флажка / радиогруппы, в котором в качестве значения указан идентификатор соответствующей записи. Я уже открыл радиокнопки с помощью xtype widgtecolumn. Но как я могу установить этот столбец так, чтобы в этом столбце была активирована только одна радиопереключатель? Текущий код для радио-столбца следующий:

{
        xtype: 'widgetcolumn',
        bind: {
            text: 'Select topic'
        },
        dataIndex: 'defaultTopic',
        widget: {
            xtype: 'radio',
            simpleValue: true
        }
    }

Answer 1

Чтобы гарантировать, что пользователь может выбрать только одну радиокнопку, вы должны добавить свойство name в свой радио-виджет.

Если вы использовали радиогруппы , как в этом примере , вам нужно будет добавить name к каждой радиокнопке. Но для вашего случая использования этой конфигурации будет достаточно:

widget: {
          xtype: 'radio',
          simpleValue: true,
          name: 'test'
        }

См. Также эту скрипку для примера.

Answer 2

Вы можете использовать checkcolumn и изменять значения записей, которые управляют значением чека, с помощью прослушивателя checkchange

Пример:

{
    xtype: 'checkcolumn', 
    text: 'Active', 
    dataIndex: 'active',
    listeners: {
        checkchange: 'onChangeDefaultTopic'
    }
}

В вашем контроллере представления:

onChangeDefaultTopic: function (column, rowIndex, checked, record) {
    if (checked) {
        store.getRange().forEach((rec) => {
            if (record.get('id') !== rec.get('id')) {
                rec.set('active', false)
            }

        });
    }
}