Sencha touch 2 如何在sencha touch中创建自定义工具栏？

我想要一个自定义工具栏，背景颜色为渐变色。 我试着说些俏皮话。但它仍然不起作用。。我所做的，我正在一步一步地写：

我在当前项目中的“资源”文件夹上创建

我把主题和图片放在那个文件夹里

我在resources文件夹中创建了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（文件） 加载文件.join（目录“…”，“主题”） sass_path=dir css_path=File.join（dir，“…”，“css”） 环境=：生产 输出样式=：压缩

然后在comand提示符下运行compass compile app.scss

在css文件夹中，已在运行命令后创建app.css文件。 7.然后我更改工具栏的代码：

xtype:“工具栏”，停靠：“顶部”， ui:‘木炭’， 标题：“设定法规遵从性目标”

但在这之后，当我运行这个项目时，在模拟器中，工具栏的背景是白色的。。。。请帮忙

---

在web浏览器的检查器中检查css是否针对x-toolbar。清空浏览器缓存可能会有所帮助。

---

您的config.rb也可能配置错误-

根据您使用的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');

这对我有用。如果你想控制梯度，那么你可以在文档中检查如何控制

---

希望这有帮助

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