CODEWITHSUNDEEP
cssextjs
Matthew Sowders
Matthew Sowders

Reputation: 1670

How do I change the radio button icon in extjs?

I have two Ext.menu.CheckItem's in a group. How would I change the checked item's disc icon to something else? I would like to retain the radio button functionality (only one selected), but have a check mark instead of the disc.

var options = new Ext.Button({
    allowDepress: false,
    menu: [
        {checked:true,group:'labels',text:'Option 1'},
        {checked:false,group:'labels',text:'Option 2'}
    ]
});

Upvotes: 0

Views: 1890

Answers (1)

Daniel Trebbien
Daniel Trebbien

Reputation: 39208

You can achieve that effect (radio controls that look like check boxes) by setting the inputType configuration option to 'checkbox':

var options = new Ext.Button({
    allowDepress: false,
    menu: [
        {inputType:'checkbox',checked:true,group:'labels',text:'Option 1'},
        {inputType:'checkbox',checked:false,group:'labels',text:'Option 2'}
    ]
});

As an example, here are two screenshots that show the effect of inputType:'checkbox':

First screenshot http://www.freeimagehosting.net/uploads/2f662f202c.png

Second screenshot with the "Red" option http://www.freeimagehosting.net/uploads/66c002aad2.png

I modified Ext JS' Checkbox/Radio Groups demo and only added the option to the "Red" radio component configuration.

Upvotes: 1

Related Questions