Custom Grid with Radio button extjs

Question

I want a custom grid, which contains a radio at the beginning of the column. Only one of the row in the grid can be selected ( that too by selecting the radio ).

I used the following approach to achieve the above said,

renderer:functiom(val){
return Ext.String.format("<input type='radio' name='rowSel' value={0} />",val);
}

Unlike Extjs radio, this is a html radio, which lacks richness, similarly i can't show validation error messages.

Is there a possibility to achieve the above using extjs radio ?

Answer 1

If you ever seen the grid examples in sencha doc here, you will find it use Ext.selection.CheckBoxModel to add a new checkbox column as first grid column (for multi-select grid).

Because Sencha does not provide a RadioModel (maybe it is not necessary because the normal grid has the same functionalities), I think you should write a new SelectionModel class which extends the Ext.selection.RowModel to meet your needs. You can reference the way in Ext.selection.CheckBoxModel and Ext.selection.RowModel

Answer 2

You can also customize the Ext JS 3.4 CheckboxGrid (Single Select) to RadioGrid.

Please refer: Customized Radio Grid in Ext JS 3.4

Hope this will help you.

Answer 3

I have a problem too. So I used singe mode from Ext.grid.RowSelectionModel like this.

{
                    margin: '10 0 0 0',
                    xtype: 'grid',
                    minHeight: 100,
                    layout: 'fit',
                    frame: true,
                    resizable: true,
                    itemId: 'previewGrid',
                    selModel: selModel = new Ext.grid.RowSelectionModel({
                        singleSelect : true
                    })
....