如何改变sencha触摸中按钮的按下状态

how to change the pressed state of a button in sencha touch

本文关键字：按钮 状态 触摸 sencha 何改变 改变      更新时间：2023-09-26

我正在使用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;  
 }

无需更改按钮的代码，您可以使用以下CSS:

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

例子

相关阅读:CSS优先级顺序

此外，始终使用Web Inspector或Firebug检查您的CSS是否应用于正确的元素，以及是否被另一个CSS类

覆盖。

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

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

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

{
    xtype: 'button',
    cls: 'messagesBtn',
    listeners: {
        'tap' : function () {
              ...   
        }
    }
}
相关文章：