Question

I am new to sencha touch.
How do we change the background color of a button to white? I have a button with two images in each corner. I want the button to be plain white.
I tried using css like this:

.quest {
background: url(../images/quest.jpg) no-repeat left,
       url(../images/rightarrow.jpg) no-repeat right;
       background-color: white;
       border: none;
       border-color:white;
       padding-left: 50px;
       text-align: left;
}

My button is here:

{
    xtype: 'button',
    text: '<div class="quest">Info</div>',
    labelWidth: '100%',
    name: '',
    handler: function() {                 
    }
}

My button has grey borders (Grey default button color in sencha) with white color in mid. How do i make it completely white? Please help.

I have even tried:

style: "background-color: white" 

Answer 1

Using ‘cls’ attribute solved my problem.

               {

                   xtype: 'button',
                   cls: 'btn',
                   text: '<div class="person">People</div>',
                   labelWidth: '100%',


                },

In my app.css define

.btn
{
background-color: white !important;
background-image: none;
}

We have to redefine both background-color and background-image properties so that the default sencha-touch.css properties are overridden. Thank you Thiem Nguyen for your help.