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