CODEWITHSUNDEEP
sencha-touch-2sencha-touch-theming
Arindam Mukherjee
Arindam Mukherjee

Reputation: 2285

How to create custom toolbar in sencha touch?

I want a custom toolbar with background color as gradient. I tried with sass. But still it is not working.. What i did, i am writing it step by step:

  1. I create on resources folder in my current project.
  2. I kept themes and images folder there.
  3. I created css and sass folder inside resources folder.

in the sass folder i created app.scss file which contains the below code:

    $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. Then i created config.rb file with this code:

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

    1. then i run compass compile app.scss in the comand prompt
    2. In css folder, app.css file has been created after running the command. 7.then i change the code for toolbar:

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

    But after that when i am running the project, in simulator, toolbar is coming with white background.... please help..

Upvotes: 0

Views: 1469

Answers (2)

Trozdol
Trozdol

Reputation: 446

Depending on the version of ST you are using you might want to use Sencha Cmd. Makes it a lot easier.

In Sencha Cmd you can create a starting point by building an empty app. After that is complete you can run the sencha app watch command from the app root folder and any sass changes will compile automatically along with many other processes. 

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');

This works for me. If you want to control the gradient then you can check how here in the docs http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.Toolbar-css_mixin-sencha-toolbar-ui

Hope this helps!

Upvotes: 0

maggie's stacktrace
maggie's stacktrace

Reputation: 11

check in your web browser's inspector that the css is targeting x-toolbar.And empty your browser cache might help. It's also possible that your config.rb is misconfigured- this is a good resource on config.rb setup for compass

Upvotes: 0

Related Questions