Сетка EXT js с одним столбцом переключателей

Question

У меня есть сетка ext js, как показано ниже:

var grid = new Ext.grid.GridPanel({
columns: [
{header: 'Account Id',dataIndex:'accountId' },
{header: 'Account NUmber',dataIndex:'accountNumber' }
]
})

Теперь мне нужно показать столбец Account Id в виде столбца переключателей.Таким образом, из сетки пользователь может выбрать один идентификатор учетной записи и отправить.Когда пользователь перезагружает страницу, этот идентификатор учетной записи должен быть предварительно выбран.

Мне нужна помощь, как это сделать.Нужно ли мне писать визуализатор в столбце Account Id?Или есть более простой способ.

РЕДАКТИРОВАТЬ: я сделал это так:

{header: 'Account Id',dataIndex:'accountId',renderer: function(value) {
return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
 }},

Каков синтаксис для добавления события onclick или onchange в группу радиосвязи?

Answer 1

Основываясь на предыдущем ответе, да, я думаю, что использование средства визуализации для вашей колонки является правильным решением. Я думаю, что вы должны идти о событии щелчка не так, как предложил Дж. Бруни. Я бы порекомендовал прослушиватель щелчков на панели сетки, который проверяет, щелкнули ли вы радиокнопку, и делегирует метод в вашей GridPanel.

Примерно так:

MyRadioGrid = Ext.extend(Ext.grid.GridPanel, {
    columns: [
        {header: 'Account Id',dataIndex:'accountId', renderer: function(value) {
            return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
        }},
        {header: 'Account NUmber',dataIndex:'accountNumber' }
    ],

    afterRender: function() {
        MyRadioGrid.superclass.afterRender.apply(this, arguments);
        this.el.on('click', this.checkRadioClick, this);
    },

    checkRadioClick: function(event) {
        if (event.getTarget('input[type="radio"]')) {
            //radio clicked... do something
        }
    }
});

Answer 2

Вы хорошо показали столбец Account Id в виде столбца переключателей, используя функцию рендеринга.

Что касается события onclick для них, вы можете просто добавить атрибут onclick в тег HTML:

return "<input onclick='my_function()' type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";