Sencha touch2: How to change the default flag, marked and unverified images

Question

I face a problem when changing the default image. I added two images checked.png and unchecked.png. and added two css classes for marked and unchecked. Only an unverified image is displayed, but when I check it, the image is not displayed. I changed the default buttons by doing the same steps below and it works well for buttons. But for checkbox this does not work (pressing Cls is not in checkboxfield). Here is a small snippet for your reference.

{ xtype: 'checkboxfield', ui:'plain', checked: 'true', action: 'didnotassisted_Action', id: 'id_assignment_didNotAssisted', cls: 'closeout-checkbox-unchecked', // pressedCls: 'closeout-checkbox-checked' }, 

CSS

 .closeout-checkbox-unchecked{ background-color:transparent; background-image:url('../images/unchecked.png'); height: 44px; width: 44px; } .closeout-checkbox-checked{ background-color:transparent; background-image:url('../images/checked.png'); height: 44px; width: 44px; } 

If there is any other approach to completion, please help me. Thanks in advance.

@Andrea, here is a screenshot of what I get after applying your code.

Answer 1

Sencha does not use the class to differentiate the status of the flag, instead it uses the selector of the pseudo-class :checked .

You can change the icons by adding the :after pseudo-element in its .x-field-mask sibling.

Give ui: 'custom' your checkboxfield and add these CSS:

 .x-field-custom .x-input-checkbox:checked + .x-field-mask:after { content: ""; height: 45px; width: 45px; position: absolute; top: 0; right: 1em; background-image:url(http://png-4.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png); background-size: contain; display: block; } .x-field-custom .x-input-checkbox + .x-field-mask:after { content: ""; height: 45px; width: 45px; position: absolute; top: 0; right: 1em; background-image:url(http://png-2.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_unchecked.png); background-size: contain; display: block; } 

Tested on Sencha 2.2.1