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

您首先可以尝试更改工具栏界面：

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

更改工具栏颜色sencha touch

1 个答案: