如何在 sencha touch 中创建自定义工具栏？答案

【问题标题】：How to create custom toolbar in sencha touch?如何在 sencha touch 中创建自定义工具栏？
【发布时间】：2014-12-13 01:44:30
【问题描述】：

我想要一个带有背景颜色作为渐变的自定义工具栏。我尝试过 sass。但它仍然不起作用..我做了什么，我正在一步一步地写它：

我在当前项目的资源文件夹中创建。
我在那里保存了主题和图像文件夹。
我在资源文件夹中创建了 css 和 sass 文件夹。

在 sass 文件夹中，我创建了 app.scss 文件，其中包含以下代码：

    $base-color: #588aad; // go big blue!$include_default_icons: false;
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;


@include pictos-iconmask("bookmarks");
@include pictos-iconmask("compose");
@include pictos-iconmask("trash");
@include pictos-iconmask("search");
@include pictos-iconmask("bookmark2");


@include sencha-toolbar-ui('charcoal', #333333,'glossy');

然后我用这段代码创建了 config.rb 文件：

dir = File.dirname(FILE) 加载 File.join(dir, '..', 'themes') sass_path = 目录 css_path = File.join(dir, "..", "css") 环境=：生产 output_style = :压缩的
1. 然后我在命令提示符下运行 compass compile app.scss
2. 在css文件夹中，运行命令后已经创建了app.css文件。 7.然后我更改工具栏的代码：
xtype: '工具栏', 停靠: 'top', ui: '木炭', title: '设定合规目标'

但是在那之后，当我运行项目时，在模拟器中，工具栏带有白色背景..请帮助..

【问题讨论】：

您确定您的应用程序使用了正确的 css 文件（检查 index.html 中的链接参考）吗？生成的文件会在sass目录的父目录下创建。
只有这个改动应该够了吧？？？
根据您的 config.rb 生成的 css 将在 resources/app.css 中。您的 scss 文件名为 app.scss，这意味着生成的文件将是 app.css。它将位于您的config.rb文件所在目录的上方目录中
嘿，谢谢哥们。现在它来了。 config.rb 文件造成了问题。

标签： sencha-touch-2 sencha-touch-theming

【解决方案1】：

检查您的网络浏览器的检查器，确定 css 的目标是 x-toolbar。清空您的浏览器缓存可能会有所帮助。您的 config.rb 也可能配置错误-this is a good resource on config.rb setup for compass

【讨论】：

【解决方案2】：

根据您使用的 ST 版本，您可能需要使用 Sencha Cmd。让它变得容易得多。

在 Sencha Cmd 中，您可以通过构建一个空的应用程序来创建一个起点。完成后，您可以从应用程序根文件夹运行sencha app watch 命令，任何 sass 更改都将与许多其他进程一起自动编译。

MyApp/resources/sass/app.scss --> compiles to --> MyApp/resources/css/app.css

// THIS WILL OVERRIDE THE DEFAULT SENCHA TOOLBAR UI THEMES
@include sencha-toolbar-ui('normal',         $base-color,   'glossy'); 
@include sencha-toolbar-ui('dark',           $second-color, 'matte' );

// THIS ONE USES A CUSTOM UI. THERES COMPASS MIXINS IN THE INCLUDED
// TO MAKE A GRADIENT OUT OF THIS COLOR.
@include sencha-toolbar-ui('custom-ui-name', $third-color,  'glossy');

这对我有用。如果你想控制渐变，那么你可以在文档http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.Toolbar-css_mixin-sencha-toolbar-ui 中查看方法

希望这会有所帮助！

【讨论】：