pressedCls doesn´t work with segmentedButton in Sencha Touch app

Question

I am working with a Sencha Touch app with the component "segmentedbutton"

{
        xtype     : 'segmentedbutton',
        cls       : 'filterbar-segmented-button',
        pressedCls: 'filterbar-segmented-button-pressed',
        items     : [
          {
            itemId  : 'showAllCustomers',
            iconCls : 'user',
            iconMask: true,
            pressed : true
          },
          {
            itemId  : 'showCustomersWithSurvey',
            iconCls : 'compose',
            iconMask: true
          }
        ]
      }

I am specifying different css classes depending of the button is pressed or not.. but it is not working correctly and the colour of the font is not changing..

Here the css code:

.filterbar-segmented-button {
  padding-left: 18%;
  color: blue;
  .filterbar-segmented-button-pressed{
    background-color: blue;
    color: white;
  }
}

What am I doing wrong?

Thank you in advance

Answer 1

Your Applying Css In Wrong Way the Hierarchy of the Css Class is Wrong

'filterbar-segmented-button', 'filterbar-segmented-button-pressed'

These Two Css Will be applied to the Same Segmented Button. Inorder to Apply the Presed Cls For the Button

.filterbar-segmented-button.filterbar-segmented-button-pressed{
//PRessed Cls Code
}

This Will Work As Expected