CODEWITHSUNDEEP
formsextjscheckboxextjs4.2
Matt Jenkins
Matt Jenkins

Reputation: 3081

Style an Ext JS checkbox to look like a toggle button

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.

Upvotes: 0

Views: 1160

Answers (1)

Matt Jenkins
Matt Jenkins

Reputation: 3081

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;
}

Upvotes: 1

Related Questions