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

Question

I am working on mobile web app using sencha touch. I created a button using following code

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

And in App.scss I added following css which changed background of this button to an image

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

Now this css works but when I press that button then it does not it removes that images and add another state to it which I don't want. I want when user presses this button then another images should be replaced with the current one. How can I achieve this?

UPDATE

I changed my code and add pressedCls

{
            xtype: 'button',
            cls: 'messagesBtn',
            pressedCls: 'x-button-pressed'
}

And here is the css

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

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

above does not work either.

Answer 1

Without having to change the code of your button you can use this CSS:

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

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

Example here

Update

Relevant read: CSS Priority Order

Also, always use the Web Inspector or Firebug to check if your CSS is applied to the right element and if it's not being overridden by another CSS class

Answer 2

You can use pressedCls config of your button which is the css class to add to the button when it is pressed :

pressedCls: 'x-button-pressed'

Then you can apply any css style using that css class:

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

Answer 3

First assign an ID in your button property, then on tap event replace the class on that particular assigned ID. You should create another class for pressed mode. Hope it works..

Answer 4

Add a tap event listener to the button and then change the pressed class for your button.

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

}