CODEWITHSUNDEEP
extjsradio-buttonwidget
holthaum
holthaum

Reputation: 95

Ext js: Radiogroup in widgetcolumn

In an Ext.grid.panel I load a list of contents as rows with several columns. I would like the user to be able to select only one of these rows via a checkbox/radiogroup column, which has the ID of the respective entry as value. I have already discovered the radiobuttons via the xtype widgtecolumn. But how can I set this column so that only one radiobutton in this column can be activated? The current code for the radio column is the following:

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

Upvotes: 0

Views: 460

Answers (2)

xhadon
xhadon

Reputation: 876

To ensure that the user can select only one radiobutton, you have to add the name property to your radio widget.

If you were using radiogroups like in this example, you'd have to add the name to each radiobutton. But for your use case, this configuration would be sufficient:

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

See also this fiddle for an example.

Upvotes: 1

Rafael Dourado D
Rafael Dourado D

Reputation: 478

You can use checkcolumn and change the records values that controls the check value using checkchange listener

Example:

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

In your view controller:

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

        });
    }
}

Upvotes: 0

Related Questions