0

背景色をグラデーションにしたカスタム ツールバーが必要です。サスでやってみた。しかし、まだ機能していません..私がやったこと、私はそれを段階的に書いています:

  1. 現在のプロジェクトの resources フォルダーに作成します。
  2. そこにテーマと画像フォルダーを保持しました。
  3. 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');

  1. 次に、次のコードで config.rb ファイルを作成しました。

    dir = File.dirname( FILE ) load File.join(dir, '..', 'themes') sass_path = dir css_path = File.join(dir, "..", "css") 環境 = :production output_style = :圧縮

    1. 次に、コマンド プロンプトで compass compile app.scss を実行します。
    2. コマンドを実行すると、css フォルダーに app.css ファイルが作成されます。7.次に、ツールバーのコードを変更します。

    xtype: 'toolbar', docked: 'top', ui: 'charcoal', title: 'Set Compliance Goals'

    しかし、その後、プロジェクトを実行しているときに、シミュレーターで、ツールバーに白い背景が表示されます..助けてください..

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

cssがx-toolbarをターゲットにしていることをWebブラウザーのインスペクターで確認してください。ブラウザーのキャッシュを空にすると役立つ場合があります。また、config.rb が正しく設定されていない可能性もあります。これは、コンパスの config.rb セットアップに関する優れたリソースです。

于 2012-06-11T15:53:03.363 に答える