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类重写

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

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

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

}

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

4 个答案: