Ext JS tener una columna de botones de radio

Question

que tiene una rejilla de Ext JS, como a continuación:

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

ahora tengo que mostrar la columna ID de la cuenta como una columna de botones de radio. Entonces, desde la grilla, el usuario puede seleccionar una ID de cuenta y enviarla. Cuando el usuario recarga la página, esa identificación de cuenta debe ser preseleccionada.

Necesito ayuda sobre cómo proceder con esto. ¿Debo escribir un procesador en la columna Id de la cuenta? O hay una forma más fácil.

EDIT: lo hice así:

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

¿Cuál es la sintaxis para añadir un evento onclick o onchange evento para el grupo de radio?

Answer 1

Has hecho bien en mostrar la columna Account Id como una columna de botones de opción, mediante el uso de una función de renderizado.

En cuanto al evento onclick para éstos, es posible que sólo tiene que añadir el atributo onclick en la etiqueta HTML:

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

Answer 2

La construcción de la respuesta anterior, sí, creo que el uso de un procesador para su columna es la solución correcta . Creo que deberías ir sobre el evento click de forma diferente a lo sugerido por J. Bruni. Recomendaría un detector de clics en el panel de la cuadrícula que verifica si hizo clic en un botón de opción y lo delega a un método en su GridPanel.

Algo como esto:

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 
     } 
    } 
});