风格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