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