Here is an example of implementation of Radio buttons for selecting one row at a time in a Grid panel in Extjs.
A group of radio buttons need to rendered in the first column of the grid.
Here is the code:
The definition of column will be as follows:-
{header: "Select",hideable:false,renderer:renderRadioBox,
editor: {
xtype:'radio'
}
}
Now,
The renderer function is defined as follows:-
function renderRadioBox(val, meta, record, rowIndex, colIndex, store){
var a = '<input type= "radio" name="radiogroup" style="margin-left:10px;"/>';
return a;
}
The action to be implemented after clicking the radio button can be written with the help of listener method on the grid panel:-
listeners: {
itemclick : function(view,rec,item,index,e,eOpt){
var position = view.getPositionByEvent(e);
var columnIndex = position.column;
if(columnIndex == 1){
// DO YOUR ACTION HERE...
}
}
}
Hope this will be helpful who wanted to implement this.
Thanks, nice tutorial. The problem is when you combine this approach with cell editing plugin, do you have any suggestions for that?
ReplyDeletethanks it works
ReplyDelete