PDA

View Full Version : Button background



laurent64
24 Sep 2010, 1:08 AM
Hello everyone :)

I'm just trying to set a background color to a button, without any CSS file. I've tried somes syntaxes, but it doesn't work (

1st try


{
xtype : 'button',
style : {
background-color : 'red'
}
}


2nd try


{
xtype : 'button',
style : {
backgroundColor : 'red'
}
}
)

Last try :


var card1 = {
xtype : 'button',
style : 'background-color:red;width:50%; margin-left:auto; margin-right:auto;'
};

function makePage(){
new Ext.Panel({
fullscreen : true,
items : [card1]
});
}


Ext.setup({
onReady : makePage
});


So, could anybody tell me what's wrong with my attempts ? Thanks

Everio
24 Sep 2010, 6:44 AM
I had the same problem. I couldn't use background-color so, I used background-image with a for your exemple a small picture with a red background.

laurent64
24 Sep 2010, 6:54 AM
Hi ! :)

Thank you very much : but i am sure it is possible ... maybe by using direct ExtJs code. It will take me a while, as i am still reading ExtJs Tutorials while trying "safe length" examples. But if i find it, i post the answer.
Thanks :)
---------------------------------------------------------

I tried with a panel instead of a button with


style : {
backgroundColor : 'red'
}


and it works.

But i must try again for button.

davidkaneda
24 Sep 2010, 10:21 PM
Hey guys- problem is that buttons have a background gradient, which is set with background-image. Just try
style: {background: 'red none'}.

laurent64
25 Sep 2010, 12:20 AM
Hi :)

Thank you very much :)

It also worked for me with the simple modification :


style : {
background : 'red none'
}


So i notice i can't just call backgroundColor as in classic CSS, and just set it to red.
Please, could you tell me where to seach in docs next time i have a trouble like this ? (I mean where will i know if there is a special implementation -as the gradient instead of plain color- and special properties variants - as background instead of backgroundColor). I juust want to be more self next time :)

Thank you very much :)

ssdesign
25 Sep 2010, 10:15 AM
Sencha Touch is pretty well documented still a good alternative way to learn it is 'dig it yourself' :)

I use Google Chrome's DOM inspector to see what the CSS is doing or what JS scripts are doing etc.
You can do this on safari as well.

laurent64
26 Sep 2010, 11:21 PM
I knew these tips, but i didn't manage to find solution myself. But thanks. :)

gabrielstuff
28 Sep 2010, 2:55 AM
Hey guys- problem is that buttons have a background gradient, which is set with background-image. Just try
style: {background: 'red none'}.

Thanks for helping.
Do you know if you plan to do some kind of advanced stylishing/CSSing tutorial with best pratictice and use of SASS ?
As long as I know there is only a basic tuts to create rounded button. Not yet any tut to create a complete theme.
The Kiva examples is quiete good, but kind of really tuff.

More other, in the last version, you modify lot of things, but didn't fix some obvious bug such as the size of the tabBar when docked bottom on Android or the gradient in the back button.

Thank you,

G