EXT js grille d'avoir une colonne de boutons radio

J'ai un ext js grille comme ci-dessous: 

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

Maintenant, j'ai besoin d'afficher l'Id de Compte de colonne comme une colonne de boutons radio. Donc, à partir de la grille, l'utilisateur peut sélectionner un Id de Compte et de le soumettre. Lorsque l'utilisateur recharge la page, que l'id de compte doit être présélectionné.

J'ai besoin d'aide sur la façon de procéder sur ce point. Dois-je écrire un convertisseur sur le Compte de l'Id de la colonne? Ou est-il un moyen plus facile.

EDIT: j'ai fait comme ceci: 

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

Quelle est la syntaxe pour ajouter un événement onclick ou de l'événement onchange de la radio du groupe?

  • Pouvez-vous poster une réponse afin que je puisse accepter ?:)
  • Je viens de le faire. Merci!
InformationsquelleAutor Victor | 2012-03-03
  1. 3

    Vous avez bien fait de nous montrer l'Id de Compte de colonne comme une colonne de boutons radio, à l'aide d'un convertisseur de fonction.

    Concernant l'événement onclick pour ceux-ci, vous pouvez simplement ajouter l'attribut onclick dans la balise HTML:

    return "<input onclick='my_function()' type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
    InformationsquelleAutor J. Bruni
  2. 8

    De construction hors de la précédente réponse, oui, je pense que l'utilisation d'un moteur de rendu de votre colonne est la bonne solution. Je pense que vous devriez aller sur l'événement click différemment J. Bruni a suggéré que. Je recommanderais un écouteur de clics sur votre panneau grille qui vérifie si vous avez cliqué sur un bouton radio, et les délégués à une méthode dans votre GridPanel.

    Quelque chose comme ceci:

    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 C'est mieux que de fixer onclick dans chaque élément. Il semblait un peu verbeux... avons-nous le plus court/moyen le plus propre à joindre le gestionnaire d'événement? Quelque chose comme du jQuery $('#grid').on('click', 'input[type="radio"]', callback); ou $('input.account_id').click(callback); (en supposant que nous avons ajouté un "account_id' classe pour les entrées)...
    • Ouais, jQuery fait beaucoup avec peu de code :). Dans cet exemple, cependant, et en général avec Ext, il est préférable d'envelopper votre entreprise de composants comme des classes qui étendent la Poste, qui est la majeure partie du code que j'ai écrit ci-dessus. La version la plus courte, sans créer de toute la classe, serait quelque chose comme myGrid.el.on('click', functionToCheckForRadio), et puis vous auriez encore besoin de la event.getTarget logique. Je ne sais pas du tout à court de main de manière Poste de filtrage des évènements en fonction de la cible cliqué, bien que cela sonne comme une extension sympathique!
    InformationsquelleAutor Sean Adkinson