pressedCls 不适用于 Sencha Touch 应用程序中的 segmentedButton

Question

我正在使用带有组件 "segmentedbutton"

的 Sencha Touch 应用程序

{
        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不正确。试试这个。

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

Answer 2

我找到了这样的解决方案..

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

Answer 3

您以错误的方式应用 Css Css Class 的层次结构是错误的

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

这两个 Css 将应用于同一个分段按钮。为了应用按钮的预置 CLS

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

这将按预期工作

pressedCls 不适用于 Sencha Touch 应用程序中的 segmentedButton

pressedCls doesn´t work with segmentedButton in Sencha Touch app

extjs

sencha-touch