Tengo una ext js cuadrícula como la siguiente:

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

Ahora necesito mostrar el Id de la Cuenta columna como una columna de botones de radio. Así que a partir de la cuadrícula usuario puede seleccionar un Id de Cuenta y enviar. Cuando el usuario vuelve a cargar la página, el id de la cuenta debe ser preseleccionada.

Necesito un poco de ayuda sobre cómo proceder en este. Necesito escribir un renderizador en la columna Id de Cuenta? O es que hay una manera más fácil.

EDIT: yo 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 agregar un evento onclick o evento onchange para el grupo de radio?

Puedes publicar como una respuesta para que yo pueda aceptar ?:)
Acabo de hacer. Gracias!

OriginalEl autor Victor | 2012-03-03

2 Comentarios

  1. 3

    Que hizo bien en mostrar el Id de la Cuenta columna como una columna de botones de radio, mediante un sistema de representación de la función.

    Sobre el evento onclick para estos, usted puede simplemente añadir el atributo onclick en el código HTML de la etiqueta:

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

    OriginalEl autor J. Bruni

  2. 8

    Edificio de la respuesta anterior, sí, creo que el uso de un sistema de representación para la columna es la solución correcta. Yo creo que debe ir sobre el evento click de manera diferente que J. Bruni sugerido, aunque. Me gustaría recomendar un oyente haga clic en en el panel de cuadrícula que cheques si usted hizo clic en un botón de radio, y los delegados a un método en el 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
            }
        }
    });
    +1 Esto es mejor que la configuración de onclick en cada elemento. Sólo parecía un poco detallado… ¿tenemos un más corto/más limpia para conectar el controlador de eventos? Algo así como jQuery $('#grid').on('click', 'input[type="radio"]', callback); o $('input.account_id').click(callback); (suponiendo que hemos añadido un ‘account_id’ clase a las entradas)…
    Sí, jQuery hace mucho con poco código :). En este ejemplo, sin embargo, y en general con Ext, es mejor envolver su negocio de componentes como las clases que extienden la Ext componente, que es la mayor parte del código que escribí anteriormente. La versión más corta, sin la creación de toda una clase, sería algo así como myGrid.el.on('click', functionToCheckForRadio) y, a continuación, usted todavía tiene la event.getTarget lógica. No sé de ningún menor forma en la Ext de filtrado de eventos basados en el objetivo de hacer clic, a pesar de que suena como una buena extensión!

    OriginalEl autor Sean Adkinson

Dejar respuesta

Please enter your comment!
Please enter your name here