Extjs4.2 Display radio button in Gridpanel

Effect: As.

Code: A column where radio buttons need to be displayed

{dataindex: ' Feemodel ', text: ' Charging mode ', flex:1, Align: ' left ', radiovalues: [{"Inputvalue": "1", "Boxlabel": "High Charge Mode"}, {"Inputvalue": "2", "Boxla Bel ":" Simple Charge Mode "}, {" Inputvalue ":" 3 "," Boxlabel ":" No Charge Mode "}], Renderer:function (value, MetaData, Recor                              D, RowIndex, Colindex, store, view) {var column = View.getgridcolumns () [Colindex],                          html = ';                              Ext.each (column.radiovalues, function (rec) {var inputvalue = Rec.inputvalue;                              var boxlabel = Rec.boxlabel;                              var checked = Inputvalue = = value;                              var name = view.id+ "_grdi_column_radio_" +record.data.id+ "_" +rowindex; HTML + = "<input name=" + name + "' type= ' Radio '" + (checked? ") Checked ":") + "colindex=" +Colindex + "' rowindex= '" + RowIndex + "' value= '" + inputvalue + "'/>" + boxlabel;                          });                      return HTML; }, Tdcls: ' Tdvalign '}

Adding events to a table

  Me.on (' AfterRender ', function (grid, eopts) {                       this.el.on (' click ', Function (event) {                var radio = Event.gettarget (' Input[type= ' Radio "]);                if (radio) {                    var rowIndex = Radio.getattribute ("RowIndex");                    var colindex = Radio.getattribute ("Colindex");                    This.getstore (). GetAt (RowIndex). Set (' Feemodel ', radio.value);                }            }, this);        

Table All code:

Ext.define ('Yxd.view.FeeModelSet.ProjectGrid', {extend:'Yxd.ux.BaseGridPanel', Xtype:'Feemodelset_projectgrid', border:0, Initcomponent:function () {varme = This; varstore = Ext.create ("Yxd.store.Project", {autoLoad:true        }); Ext.applyif (Me, {store:store, columns: [{flex:1, Dataindex:'Id', Text:'Id', Hidden:true, align:'Center'}, {text:'Serial Number', Xtype:'Rownumberer', Width: -, Tdcls:'tdvalign', align:'Center'}, {dataindex:'Name', Text:'Project Name', Flex:1, align:' Left', Tdcls:'tdvalign'}, {dataindex:'Feemodel', Text:'mode of receipt of fees', Flex:1, align:' Left', radiovalues: [{"Inputvalue":"1","Boxlabel":"High Charge mode"}, {"Inputvalue":"2","Boxlabel":"Simple charge Mode"}, {"Inputvalue":"3","Boxlabel":"no Charge mode"}], renderer:function (value, MetaData, record, RowIndex, Colindex, store, view) { varColumn =view.getgridcolumns () [Colindex], HTML="'; Ext.each (column.radiovalues, function (rec) {varInputvalue =Rec.inputvalue; varBoxlabel =Rec.boxlabel; var checked= Inputvalue = =value; varName = view.id+"_grdi_column_radio_"+record.data.id+"_"+RowIndex; HTML+="<input name= '"+ name +"' type= ' Radio '"+ (checked?"checked":"") +"colindex= '"+ Colindex +"' rowindex= '"+ RowIndex +"' value= '"+ Inputvalue +"'/>"+Boxlabel;                          }); returnhtml; }, Tdcls:'tdvalign'                }]        });        Me.callparent (arguments); Me.on ('AfterRender', function (grid, eopts) { This. El.on ('Click', Function (Event) {                varRadio =Event. Gettarget ('input[type= "Radio"]'); if(radio) {varRowIndex = Radio.getattribute ("RowIndex"); varColindex = Radio.getattribute ("Colindex");  This. GetStore (). GetAt (RowIndex).Set('Feemodel', Radio.value); }            },  This);     }); }  });

Extjs4.2 Display radio button in Gridpanel