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.

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.

• javascript
• sencha-touch
• sencha-touch-2

Share Improve this question Follow edited Mar 12, 2013 at 6:13 Om3ga asked Mar 12, 2013 at 5:51 Om3gaOm3ga 33.1k4545 gold badges149149 silver badges230230 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

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

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..

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

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

}