View Full Version : How To Get The Selected Radio Button Value In Ext.grid.Panel

23 Jan 2013, 1:58 AM
Hi I am new to Extjs,
In My Application, i am having one grid in that one column having radio buttons having dynamic id as shown in the code,
when i click on a button in my page, how to get that selected radio button value from that grid, and also how to check the radio button by default.

This is my code:

var subscriptionplanGrid = Ext.create('lib.Commons.Components.Grid.MailtrackGridPanel', { title:'SubScription',
width : 700,
height : 200,
id : 'subscriptionId',
cls : 'paddingLeft',
columns : [{
text : 'Id',
sortable : true,
renderer : this.id,
editor: "numberfield",
dataIndex: 'id',
hidden: true
header: "Select",
renderer: function(value, metaData, record, rowIdx, colIdx, store) {
return '<input type="radio" name="billingPlansRadio" id='+record.data.id+'>'

text : '<b>Plan Name</b>',
dataIndex: 'name',
sortable : true,
editor : "textfield"
text : '<b>Price </b>',
sortable : true,
dataIndex: 'price',
editor : "textfield"


Please give me reply.........
Thanks in advance....

23 Jan 2013, 7:43 AM
Your question has to do with HTML and JS and is not specific to ExtJS. To make the radio button checked by default, you have to add 'checked' to it. e.g.:

<input type="radio" name="test" id="test" value="test" checked> Test<br>

However, if you just have one radio button and if its checked, you cannot unchecked it. if you have more than one, you can set one to checked and the user may then change the selection.

To see if the radio button is checked or not, you can use document.getElementById or document.getElementsByName to access the radio button:

alert(document.getElementById('test').checked); // this will alert true or false depending on the radio button's state; id must be unique!


var radios = document.getElementsByName('test'); // name must not be unique. you may assign more than one radio buttons the same name.

for(var i=0; i<radios.length; i++) // loop over radio buttons with same name and find out their state

23 Jan 2013, 7:47 AM
From the photo you have uploaded, i think that the checkboxmodel may help you. Set the selType config on your grid to selType: 'checkboxmodel'. You will then automatically get a column with checkboxes on your grid. to get the records which are selected:

var srecords = grid.getSelectionModel().getSelection();

This will give you an array of selected records.