样式SegmentedButton Sencha

Question

每个工具栏下方都有一个分段按钮。 我们已经正确设置了此按钮的样式。 但是，设置PressedCls确实很困难。 我尝试了几种形式，当然还有谷歌。 希望有人可以在这里帮助我。

单击时，按钮的背景色应为＃007aFF，文本颜色为#fff。 而已。 我怎样才能做到这一点。

我们的CSS app.css

    //SegmentedButtons
.customSegmentedButtonPressedCls{
    color: #fff;
    background: #007aff !important;
}

.button_pressed.x-button-pressed{
color: #148DEA;
background:#148DEA !important; 
}

应用中的分段按钮部分：

{
    xtype: 'segmentedbutton',
    ui: 'segment',
    allowDepress: false,
    width: '100%',
    id: 'btnLabelSegmented',
    pressedCls: 'button_pressed',
    itemId: 'btnLabelSegmented',
    items: [{
        text: 'All',
        id: 'btnOrderSegmentedAll',
        itemId: 'btnOrderSegmentedAll',
        style: {
            'background-color': '#f8f8f8',
            'color': '#007aff',
            'border-right': '1px solid #007aff',
            'border-left': '1px solid #007aff',
            'border-top': '1px solid #007aff',
            'border-bottom': '1px solid #007aff',
            'font-size': '15px'
        },
        flex: 1,
        pressed: true
    }, {
        text: 'Label 1',
        style: {
            'background-color': '#f8f8f8',
            'color': '#007aff',
            'border-right': '1px solid #007aff',
            'border-top': '1px solid #007aff',
            'border-bottom': '1px solid #007aff',
            'font-size': '15px'
        },
        id: 'btnOrderSegmentedLabel1',
        itemId: 'btnOrderSegmentedLabel1',
        flex: 1
    }, {
        text: 'Label 2',
        style: {
            'background-color': '#f8f8f8',
            'color': '#007aff',
            'border-right': '1px solid #007aff',
            'border-top': '1px solid #007aff',
            'border-bottom': '1px solid #007aff',
            'font-size': '15px'
        },
        id: 'btnLabelSegmentedLabel2',
        itemId: 'btnLabelSegmentedLabel2',
        flex: 1
    }]
},

Answer 1

尝试这样的操作：更改不同颜色的背景图像。

.backCls.x-button-pressing{
background: url('../images/back_active.png') !important;
background-repeat: no-repeat;
background-size: 65px 65px;
height: 65px;
width: 65px;
}

或关心这个相关的问题

单击sencha中的按钮时如何更改更改图像