Clever Geek Handbook

Show image instead of checked state of checkbox in extjs

How to show the image (checked) instead of the default checkbox when the user checks it?

I tried using the config checkedCls

where the image goes but the downside of that checkbox.

checkedCls: 'checkedBoxStyle'

      

        
        
        
      

    
 .checkedBoxStyle{
       background-image:url('http://www.chathamhouse.org/sites/default/files/public/images/buttons/tick-icon.png');
       background-repeat:no-repeat;
 }

jsfiddle to get started.

+3


source to share


1 answer


Well, the image only changes its background position with

.x-form-cb-checked {
     background-position: 0 -13px;
}

so the original image looks like this:

enter image description here

Here you have to change the whole image.

I would suggest changing the base class and force the override



So:

.newBase input{
    background-image:url('../resources/images/checkBox_Tick_Mark.png') !Important;
}

And in config

...
baseCls: 'newBase',
...

see JSFiddle (image path is wrong, but it should show you the trick)

+5


source






More articles:


All Articles