如何在sencha touch中更改按钮的按下状态

Question

我正在使用sencha touch在移动网络应用程序上工作.我使用以下代码创建了一个按钮

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

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

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

现在这个css工作但是当我按下那个按钮然后它不会删除那些图像并添加另一个我不想要的状态.我想当用户按下此按钮时,应该用当前的图像替换另一个图像.我怎样才能做到这一点？

UPDATE

我更改了代码并添加了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
 }

这里的例子

更新

相关阅读:CSS优先顺序

此外,始终使用Web Inspector或Firebug来检查您的CSS是否应用于正确的元素,以及它是否未被其他CSS类重写