How can I apply correctly a radio button in a grid extjs?

Question

I am working locally. I used a function to display the radio button inside the grid, and then I call the function in the renderer. I know it's wrong, this is just to show you what I want.

I don't know how to apply the radio button to work for each row.

I use extjs 3.4.

Sorry by my english and by disorder.

This is the Array:

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

This is the 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);

The "radiogrid" function:

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

And this is the grid:

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
                  }],


})

The code display this:

Answer 1

Perhaps try a listener on the grid that handles the cellclick event. Using the parameters that Ext passes to this handler, you can access the store record to set or get values as needed:

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