View Full Version : Grid with radio buttons

28 Dec 2011, 11:38 PM
I want to select a record from the grid.I have seen in examples.There are some examples with checkboxes,but instead of using checkbox , I need radio buttons.How can i display radio buttons in the grid to select the record.

Below is the code,

enabled: true
Ext.Loader.setPath('Ext.ux', '../ux');


Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance']

// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. ');

var getLocalStore = function() {
return Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: Ext.grid.dummyData
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid2 = Ext.create('Ext.grid.Panel', {
store: getLocalStore(),
selModel: sm,
columns: [
{text: "Company", width: 200, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: Ext.getBody()


29 Dec 2011, 9:44 AM
Please post int he appropriate forum and wrap code in the code tags. I have done both of this for you.

I would extend Ext.select.CheckboxModel to only allow single selection and have a new CSS class that shows radio buttons instead. The checkbox in the Ext.select.CheckboxModel is only a div with two images that one shown at a time depending on the checked state.

29 Dec 2011, 9:52 AM
Thanks alot mitchellsimoens,

i am newbie to EXTJS and it would be helpful if you can provide me with sample code.

Md Naveed