设置Ext JS复选框以使其看起来像一个切换按钮

Question

我想知道如何将Ext JS复选框设置为切换按钮。

我正试图避免深入研究自定义主题。

Answer 1

好吧，在我发布问题之前，我已经弄明白了。事实证明它并不太难......

<强> JS：

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

自定义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;
}