html - 样式 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; 
}

App中的分段按钮部分:

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

或者关注这个相关问题

How to change change images when click button in sencha