Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Theming Buttons and Toolbars

Page of 168

Theming Toolbars

Use the sencha-toolbar-ui mixin to define a custom toolbar theme. This mixin supports the following arguments, listed in order:

  • A UI identifier
  • The background color of the toolbar, specified as a hex value
  • The gradient fill (matte, bevel, glossy, recessed, flat)

In order to theme a toolbar with a green matte background you would insert the following command at the bottom of your application's .scss file:

@include sencha-toolbar-ui('GreenLanternToolbar', #1DA237, 'matte');

You would then apply the ui to a toolbar by setting its ui configuration property as illustrated below:

{
 xtype: 'toolbar',
 ui: 'GreenLanternToolbar',
 items: [
  { xtype: 'button', text: 'Click Me'}
 ]
}

Applying a background image to toolbars and tabbars

Overriding the Default Toolbar/Tabbar Theme

By default, Sencha Touch applies a style class named .x-toolbar-dark to all toolbars, .x-tabbar-dark to all tab bars, and .x-titlebar-dark to all titlebars. As illustrated by the following example, you can override these styles to apply custom CSS3 effects including using a background image and applying different types of CSS3 gradients:

.x-toolbar-dark, .x-tabbar-dark {
   background-image: url('../images/top-grain.png'), -webkit-radial-gradient(top center, circle, #9f5628, #5d2f17);
   background-repeat: repeat-x;
   .x-innerhtml {
     color: #3a1515;
     text-shadow: 0px 1px rgba(255,255,255,.3);
   }
}

Note: The Colorzilla website enables you to visually define custom gradient effects.

Themed buttonsTheming Buttons

You can define custom themes for buttons by invoking the sencha-button-ui mixin. This mixin accepts the following arguments:

  • The ID of the new ui class to be generated
  • The background color of the button
  • The visual effect (matte, bevel, glossy, recessed, and flat)

The following code illustrates how to define a custom button theme:

@include sencha-button-ui('amberBeerButton', #FFAC00,'glossy');

In your application you could subsequently apply to your buttons the following ui classes:

  • amberBeerButton
  • amberBeerButton-round
  • amberBeerButton-small

The following example illustrates how to apply the generated button ui classes:

{
 xtype: 'container',
 itemId: 'buttonContainer',
 margin: 5,
 layout: { type: 'hbox'},
 items: [
  {
   xtype: 'button',
   flex: 1,
   itemId: 'btnGeoCode',
   margin: '0 5 0 0',
   ui: 'amberBeerButton',
   iconCls: 'locate',
   iconMask: true,
   text: 'Geo'
  },
  {
   xtype: 'button',
   flex: 1,
   itemId: 'btnSaveContact',
   margin: '0 5 0 0',
   ui: 'amberBeerButton-small',
   iconCls: 'add',
   iconMask: true,
   text: 'Save'
  },
  {
   xtype: 'button',
   flex: 1,
   itemId: 'btnDeleteContact',
   ui: 'amberBeerButton-round',
   iconCls: 'trash',
   iconMask: true,
   text: 'Delete'
  }
 ]
}
Page of 168
comments powered by Disqus