Style an Ext JS checkbox to look like a toggle button

Question

I'm wondering how one might go about styling an Ext JS checkbox to look like a toggle button.

I'm trying to avoid digging into custom themes for this.

Answer 1

Well, I figured it out before I finished posting the question. Turns out it's not too hard...

JS:

{
    xtype: 'checkboxfield',
    fieldCls: 'toggleBox',
    inputAttrTpl: 'value="Button text here"'
}

Custom CSS:

.toggleBox {
    background: transparent;
    margin: 0;
    width: auto;
    padding: 0 7px;
    height: 25px;
    border: 1px solid #aaa;
    color: #999;
}

.x-form-cb-checked .toggleBox {
    border: 1px solid #393;
    background: #7d7;
    color: #fff;
}