javascript - 如何在sencha touch中改变按钮的按下状态

Question

我正在使用 sencha touch 开发移动网络应用程序。我使用以下代码创建了一个按钮

 {
            xtype: 'button',
            cls: 'messagesBtn'
}

在 App.scss 中，我添加了以下 css，将此按钮的背景更改为图像

.messagesBtn {
  height: 50%;
  background: url(../images/home.png) no-repeat;
}

现在这个 css 可以工作了，但是当我按下那个按钮时，它不会删除那个图像并向它添加另一个我不想要的状态。我希望当用户按下此按钮时，应将另一张图片替换为当前图片。 我怎样才能做到这一点？

更新

我更改了我的代码并添加了 pressedCls

{
            xtype: 'button',
            cls: 'messagesBtn',
            pressedCls: 'x-button-pressed'
}

这是CSS

 .messagesBtn {
  background: url(../images/home.png) no-repeat;
 } 

 .x-button-pressed {
    background: url(../images/appointments.png) no-repeat;  
 }

以上也不行。

Answer 1

无需更改按钮的代码，您可以使用此 CSS:

.messagesBtn {
     // Your CSS for the normal state
 } 

 .messagesBtn.x-button-pressing {
     // Your CSS for the pressing state
 }

Example here

更新

相关阅读:CSS Priority Order

此外，请始终使用 Web Inspector 或 Firebug 检查您的 CSS 是否应用于正确的元素，以及它是否未被其他 CSS 类覆盖