Thursday, August 9, 2012

Radio button in Grid Panel for selecting items using Extjs (Extended Javascript Library)


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.

2 comments:

  1. Thanks, nice tutorial. The problem is when you combine this approach with cell editing plugin, do you have any suggestions for that?

    ReplyDelete