pressedCls работу с это не распространяется segmentedButton в Сенча сенсорный приложение

Question

Я работаю с приложением Сенча сенсорный с компонентом «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 
      } 
     ] 
     } 

Я с указанием различных классов CSS в зависимости от кнопки нажата или нет. ., но он не работает правильно, и цвет шрифта не меняется ..

Вот код CSS:

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

Что я делаю неправильно?

Вы заранее заблаговременно

Answer 1

Вашего Применение Css в неправильном пути иерархия Css класса является Неправильным

'filterbar члеников кнопки', 'filterbar-segmented-button-press'

Эти два Css будут применены к той же сегментированной кнопке. Симметричного Задействование Presed Cls Для Баттона

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

Это будет работать как

Answer 2

Ваш css неверен. Попробуй это.

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

Answer 3

Я нашел решение этого пути ..

.filterbar-segmented-button { 
    padding-left: 18%; 
    color: blue; 
    .filterbar-segmented-button-pressed{ 
    background-color: blue; 
    .x-button-icon, 
    .x-button-label { 
     color: #f8f8f8; 
    } 
    } 
}