Show image instead of checked state of checkbox in extjs

Question

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

I tried using checkedCls config, in which the image is coming but backside of the 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 start.

Answer 1

Well, the image only changes its background position with

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

cause the origin image looks like this:

You should change the whole image here.

I would suggest to change the Base class and force a override

like so:

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

And in the config

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

see your JSFiddle (The image path is incorrect, but it should show you the trick)