Checkbox selection model - radio button styling?

0
votes

I'm using ExtJs 4 to build out a new web page with a few forms in it, nothing crazy. On this page I have a gridpanel using a checkbox selection model with mode set to 'Single'. Here is my selection model configuration:

Ext.create('Ext.selection.CheckboxModel', {
    mode: 'Single',
    checkOnly: true,
    showHeaderCheckbox: false
    /*listeners: {
        select: function(model, record, idx) {},
        deselect: function(model, record, idx) {}
    }*/
});

Functionally speaking, this works absolutely fine. It limits the user to one selection in the gridpanel in which is it being used. However, in my requirements this field is defined as a radio button (which makes sense since in basic HTML this would be the input type used for a single selection, not a checkbox).

Is there configuration setting I could add to the selection model to make the field display as radio buttons instead of checkboxes? Alternatively, is there a CSS update I could make to show the field as a radio button?

2
javascriptextjsextjs4.2
you can use radiogroup – Chandra Sekar

2 Answers

3
votes

Absolutely you can achieve with CSS.

You can find that the default image is coming from build/production/{app name}/resources/images/form/checkbox.png.

Inside extjs:

{
   xtype: 'grid',
   cls: 'checkbox-overwrite',
   selModel:{
               selType: 'checkboxmodel',
               mode: 'SINGLE'
           }
   ...
}

Inside CSS

.checkbox-overwrite .x-grid-row-checker, 
.checkbox-overwrite .x-column-header-checkbox .x-column-header-text {
    background-image: url(from your css file path to build/production/{app name}/resources/images/form/radio.png);
}

Sometimes, the path from your css file to the resource may not be stable or not convenience to define it. I suggest you just go to the folder find the radio.png and save it to your application's defaults images folder. Then it will be much easier to work with the path inside CSS.

0
votes

You can use the radiobutton see the difference there is only one change if you change the defaultTYpe to radiogroup thats it remaining things are same

docs: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Checkbox http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Radio