Search code examples
extjsextjs4extjs-mvc

Custom Grid with Radio button extjs


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 ?


Solution

  • 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