Ext, сетка имеет один столбец переключателей

Question

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

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

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

Мне нужна помощь в том, как действовать дальше. Нужно ли мне писать рендерер в столбце «Идентификатор учетной записи»? Или есть более простой способ.

EDIT: Я сделал так:

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

Что такое синтаксис, чтобы добавить событие OnClick или OnChange событие в группе радио?

Answer 1

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

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

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

Answer 2

Строительство от предыдущего ответа, да, я думаю, с помощью рендерер для столбца является правильным решением , Я думаю, вы должны пойти по событию клика иначе, чем предложил Дж. Бруни. Я бы рекомендовал прослушиватель кликов на вашей панели сетки, который проверяет, нажал ли вы переключатель и делегирует метод в свой 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 
     } 
    } 
});