1

各ツールバーのすぐ下にセグメント化されたボタンがあります。このボタンのスタイルを適切に設定しました。ただし、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
    }]
},
4

1 に答える 1