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.

Remove the Refresh Button from Grid Panel in Extjs (Extended javaScript Library)

When you add a toolbar at the bottom of the Grid Panel, you can observe the Refresh icon.
If you wish to hide this refresh button you can do the following

listeners: {
          
/* FIRES AFTER THE COMPONENT RENDERING IS FINISHED.
  THE AFTERRENDER EVENT IS FIRED AFTER THIS COMPONENT HAS BEEN RENDERED
*/                                      
afterrender : function(component){                    
component.getBottomToolbar().refresh.hideParent = true;
component.getBottomToolbar().refresh.hide();                
}
}

This will simply hide the Refresh Icon.