How to create custom toolbar in sencha touch?

0
votes

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..

2
sencha-touch-2sencha-touch-theming
Are you sure that you application uses the correct css file (check the link reference in index.html)? The generated file will be created in the parent directory of the sass directory. – jorgenfb
<link rel="stylesheet" type="text/css" href="resources/css/custom.css"/> only this change should be enough right??? – Arindam Mukherjee
According to your config.rb the generated css would be in resources/app.css. Your scss file is named app.scss that means the generated file will be app.css. And it will be located in the directory above the directory where your config.rb file is located – jorgenfb
Hey thanks buddy. Now it is coming. config.rb file was creating the problem. – Arindam Mukherjee

2 Answers

0
votes

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

0
votes

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!