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

Question

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

 {
            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
 }

这里的例子

更新资料

相关阅读： CSS优先顺序

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

Answer 2

您可以使用按钮的PressedCls配置，该配置是the css class to add to the button when it is pressed ：

pressedCls: 'x-button-pressed'

然后，您可以使用该CSS类应用任何CSS样式：

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

Answer 3

首先在您的按钮属性中分配一个ID ，然后在tap event替换该特定分配ID上的class 。 您应该为pressed模式创建另一个类。 希望它能工作..

Answer 4

在按钮上添加一个点击事件侦听器，然后更改按钮的按下类。

{
    xtype: 'button',
    cls: 'messagesBtn',
    listeners: {
        'tap' : function () {
              ...   
        }
    }

}