更改工具栏颜色 sencha touch

Question

我是 HTML5 新手并使用 sencha touch。 请任何人给我一个如何更改工具栏颜色的完整示例。 我尝试使用 scss 来做到这一点，但我没有成功。 感谢所有答案，

代码：

//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'
            }]
});

我必须包含任何样式文件吗？ 谢谢。

Answer 1

您可以先尝试更改您的工具栏 UI：

dockedItems: [
    {
        xtype:"toolbar",
        dock: "bottom",
        ui = "light",
        ...

试试看。 您还可以使用特定颜色自定义布局。我从不这样做，但互联网上有很多文档：
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/

这里是工具栏的文档：
http://docs.sencha.com/touch/1-1/#!/api/Ext.Toolbar

让我们知道发生了什么

编辑：要编译你的 Scss (Saas)，试试这个：compass compile path/to/scss 这是一个很好的指南，所有内容都写在http://www.sencha.com/forum/showthread.php?127607-Mastering-the-Compass-SASS-Setup-with-Sencha-Touch