0

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

  1. 我在当前项目中的资源文件夹上创建。
  2. 我在那里保存了主题和图像文件夹。
  3. 我在资源文件夹中创建了 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');

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

    dir = File.dirname( FILE ) load File.join(dir, '..', 'themes') sass_path = dir css_path = File.join(dir, "..", "css") environment = :production output_style = : 压缩

    1. 然后我在命令提示符下运行 compass compile app.scss
    2. 在 css 文件夹中，运行命令后已创建 app.css 文件。7.然后我更改工具栏的代码：

    xtype：“工具栏”，停靠：“顶部”，ui：“木炭”，标题：“设置合规目标”

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

4

2 回答 2

0

根据您使用的 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 -工具栏-ui

希望这可以帮助！

于 2014-12-12T17:44:30.727 回答
0

检查您的 Web 浏览器的检查器，确定 css 的目标是 x-toolbar。清空您的浏览器缓存可能会有所帮助。也可能是您的 config.rb 配置错误- 这是 config.rb 指南针设置的一个很好的资源

于 2012-06-11T15:53:03.363 回答