change toolbar color sencha touch - sencha-touch

Question

I'm new to HTML5 and using sencha touch.
Please anyone give me a full example of how to change the toolbar color.
I tried to do that using scss, but I didn't succeed.
Thanks to all answers,
Code:
//wrapped with css tag
#include sencha-toolbar-ui('yellow', #E9D890, 'bevel');
var loginPanel = new Ext.Panel({
fullscreen: true,
items: [
// add a panel to the root panel
{
xtype: "form",
renderTo: document.body,
items: [
{
xtype: "textfield",
name: "username",
id:"txtusername",
label: "Username",
placeHolder: "your username here",
},
{
xtype: "passwordfield",
name: "password",
id:"txtpassword",
label: "Password",
placeHolder: "your password here"
},
{
width:100,
xtype:"button",
iu:"action",
text: "log in",
handler:logIn
}
]
}
],
dockedItems: [
{
xtype:"toolbar",
dock: "bottom",
items: [
{
iconMask: true,
iconCls:"team",
handler:tapfbHandler,
}
]
},
{
xtype:'toolbar',
dock:'top',
title:'app name',
ui:'yellow'
}]
});
Do I have to include any style file?
Thanks.

Answer 1

You first can try to change your Toolbar UI :
dockedItems: [
{
xtype:"toolbar",
dock: "bottom",
ui = "light",
...
Try it.
You also have the opportunity to custom your layout with specific color. I never do this, but a lot of doc is present over internet :
http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch
http://existdissolve.com/2011/03/sencha-touch-theming-building-our-custom-stylesheet-with-sass
http://superdit.com/2011/07/22/sencha-touch-references-and-tutorial-collection/
Here is the doc for Toolbar :
http://docs.sencha.com/touch/1-1/#!/api/Ext.Toolbar
let us know what happend
Edit : To compile your Scss (Saas), try this : compass compile path/to/scss
here is a good guide all is wrote http://www.sencha.com/forum/showthread.php?127607-Mastering-the-Compass-SASS-Setup-with-Sencha-Touch