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

我正在使用sencha touch的移动web应用程序。我用下面的代码如何更改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; 
}

上面也不起作用。

来源

2013-03-12 2619

，而无需改变你的按钮的代码，你可以使用这个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类覆盖

来源

2013-03-12 07:20:30

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

来源

2013-03-12 06:01:32

您可以使用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; 
}

来源

2013-03-12 06:02:01 Eli

请查看我的更新。此解决方案不起作用。 – 2619 2013-03-12 06:14:17

奇怪，它应该工作，你可以尝试改变你的CSS为：'background-image：url（'../ images/appointments.png'）！important;' – Eli 2013-03-12 07:39:51

-1

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

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

}

来源

2013-03-12 06:04:16 cclerville

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

回答

相关问题