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

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

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

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

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

现在这个css工作了，但当我按下那个按钮，它就不工作了，它会删除那个图像，并向它添加另一个我不想要的状态。我想当用户按下这个按钮，然后另一个图像应替换为当前的一个我如何才能做到这一点？

更新

我更改了代码并添加了按CLS

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

---

上述操作也不起作用。

首先在按钮属性中指定一个

ID

，然后在

点击事件

上替换该特定指定ID上的

类。您应该为
按下模式创建另一个类。希望它能起作用。
首先在按钮属性中指定一个
ID
，然后在
点击事件
上替换指定ID上的
类。您应该为
按下模式创建另一个类。希望它能工作。
您可以使用按钮的配置，它是按下按钮时添加到按钮的css类。
：

pressedCls: 'x-button-pressed'

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

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

您可以使用按钮的配置，当按下按钮时，该按钮是css类添加到按钮中的
：

pressedCls: 'x-button-pressed'

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

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

向按钮添加事件侦听器，然后更改按钮的已按下类

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

}

向按钮添加事件侦听器，然后更改按钮的已按下类

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

}

无需更改按钮的代码，即可使用此CSS：

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

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


更新

相关内容如下：

此外，始终使用Web Inspector或Firebug检查CSS是否应用于正确的元素，以及是否未被其他CSS类覆盖，而无需更改按钮的代码。您可以使用此CSS：

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

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


更新

相关内容如下：

此外，始终使用Web检查器或Firebug检查CSS是否应用于正确的元素，如果它没有被另一个CSS类覆盖
奇怪，它应该可以工作，您可以尝试将CSS更改为：
背景图像：url（'../images/appointments.png'）！重要的奇怪，应该可以，您可以尝试将css更改为：
背景图像：url（'../images/appointments.png'）！重要的