Comment puis-je appliquer correctement un bouton radio dans une grille extjs?

Question

Je travaille localement. J'ai utilisé une fonction pour afficher le bouton radio à l'intérieur de la grille, puis j'appelle la fonction dans le renderer. Je sais que c'est faux, c'est juste pour te montrer ce que je veux.

Je ne sais pas comment appliquer le bouton radio pour travailler pour chaque rangée.

J'utilise extjs 3.4.

Désolé par mon anglais et par le désordre.

C'est le tableau:

var data_metas = [['INGRESE META N°1','','','','','','100%','100%'], 
        ['INGRESE META N°2','','','','','','100%','100%'], 
        ['INGRESE META N°3','','','','','','100%','100%']]; 

C'est le ArrayStore:

var store_grid_metas = new Ext.data.ArrayStore({ 
        fields: [ 
        {name: 'Meta'}, 
        {name: '100%'}, 
        {name: '75%'}, 
        {name: '50%'}, 
        {name: '25%'}, 
        {name: '0%'}, 
        {name: 'Ponderación'}, 
        {name: 'Nota final'} 
        ] 
}); 

store_grid_metas.loadData(data_metas); 

La fonction "radiogrid":

function radiogrid (value) { 
return "<input type='radio' name = 'primaryRadioMetaUno' " + (value ? "checked='checked'" : "") + ">"; 
} 

Et voici la grille:

var grid_metas = new Ext.grid.GridPanel({ 

      store  : store_grid_metas, 
      id   : 'grid_metas', 
      stripeRows : true, 
      height  : 500, 
      width  : '100%', 
      autoScroll : true, 
      frame  : true, 
      border  : true, 
      columnLines : true, 
      stateful : true, 
      clicksToEdit: 1, 
      items: [{ 

           xtype: 'button', 
           itemId: 'btn_guardar_meta', 
           icon: '../../icons/add.png', 
           scale: 'small', 
           text: '<b>INGRESAR METAS</b>', 
           handler: function(){ 

             //modal_agregar_metas(); 

           } 
        }], 

      columns:[{ 
         xtype: 'gridcolumn', 
         dataIndex: 'Meta',name: '', 
         header: 'Meta', 
         sortable: true, 
         grupable:true, 
         width: 400,      
        },{ 
         xtype: 'gridcolumn', 
         dataIndex: '100%',name: '', 
         header: '100%', 
         sortable: true, 
         grupable:true, 
         align: 'center', 
         width: 50, 
         renderer : radiogrid    
        },{ 
         xtype: 'gridcolumn', 
         dataIndex: '75%',name: '', 
         header: '75%', 
         sortable: true, 
         grupable:true, 
         align: 'center', 
         width: 50, 
         renderer : radiogrid 
        },{ 
        xtype: 'gridcolumn', 
         dataIndex: '50%',name: '', 
         header: '50%', 
         sortable: true, 
         grupable:true, 
         align: 'center', 
         width: 50, 
         renderer : radiogrid 
        },{ 
         xtype: 'gridcolumn', 
         dataIndex: '25%',name: '', 
         header: '25%', 
         sortable: true, 
         grupable:true, 
         align: 'center', 
         width: 50, 
         renderer : radiogrid 
        },{ 
         xtype: 'gridcolumn', 
         dataIndex: '0%',name: '', 
         header: '0%', 
         sortable: true, 
         grupable:true, 
         align: 'center', 
         width: 50, 
         renderer : radiogrid 
        },{ 
         xtype: 'gridcolumn', 
         dataIndex: 'Ponderación',name: '', 
         header: 'Ponderación', 
         sortable: true, 
         grupable:true, 
         width: 150 
        },{ 
         xtype: 'gridcolumn', 
         dataIndex: 'Nota final',name: '', 
         header: 'Nota final', 
         sortable: true, 
         grupable:true, 
         width: 150 
        }], 


}) 

L'affichage du code ceci:

Answer 1

Peut-être essayer un auditeur sur la grille qui gère l'événement cellclick. En utilisant les paramètres que Ext transmet à ce gestionnaire, vous pouvez accéder à l'enregistrement de magasin pour définir ou obtenir les valeurs nécessaires:

function(grid, rowIndex, columnIndex, e) { 
    var record = grid.getStore().getAt(rowIndex); // Get the Record 
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name 
    var data = record.get(fieldName); 
}