Sencha Touch 2.0 is out, and so far everything is going great. A pet peeve of mine, though, is that Ext.field.Radio looks exactly like Ext.field.Checkbox. This is a strange “feature”, and reeks of laziness on Sencha’s part. I have developed my own Radio style that you can feel free to borrow and use however you’d like.

Original Radio style.

Ahh, much better.

I created a separate CSS file called “overrides.css” that I use to override some of the default styles, and put the following CSS in there.

.x-field .x-input-radio:after,
.x-field.x-item-disabled .x-input-radio:checked:after {
    content: "";
    position: absolute;
    width: 1.4em;
    height: 1.4em;
    top: 50%;
    left: auto;
    right: 1.1em;
    -webkit-mask-image: url();
    margin-top: -0.7em;
    border-radius: 15px;
}
.x-field .x-input-radio:checked:after {
    content: "";
    position: absolute;
    top: 50%;
    left: auto;
    right: 1.1em;
    -webkit-mask-image: url();
    margin-top: -0.7em;
    border: 5px solid #dddddd;
    border-radius: 15px;
}

Leave a Reply Cancel reply

You must be logged in to post a comment.