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

Docking Toolbars, Titlebars, and Buttons

Page of 168

Docking Toolbars and Titlebars

Ext.Toolbar is a subclass of Ext.Container that may be docked into a fixed position along the top, bottom, left, or right of a parent Container. While a toolbar can contain any component, it is typically only used to display a set of buttons.

Ext.Titlebar is a subclass of Ext.Toolbar. The principal difference between the two classes is that in a Titlebar, the specified title text is always centered between buttons that are aligned to either the left or right of the title. Titles in Titlebars will automatically change position and truncate with ellipsis in order to not be overwritten by buttons.

As specified in Apple's iOS Human Interface Guidelines, on mobile phones toolbars/tab bars are docked at the bottom of the screen. With tablets, however, toolbars are typically docked at the top of the screen.

The following example illustrates docking toolbars at the top and bottom of a container:

Docking Toolbars
Ext.define('MyApp.view.MyContainer', {
 extend: 'Ext.Container',
 config: {
  items: [
   {
    xtype: 'toolbar',
    docked: 'top',
    title: 'Top Toolbar'
   },
   {
    xtype: 'toolbar',
    docked: 'bottom',
    title: 'Bottom Toolbar'
   }
  ]
 }
});

Adding Buttons to a Toolbars and Titlebars

The Ext.Button class (xtype: button) extends the Ext.Component class. While buttons are typically added as items of a Toolbar, they can actually be added to any view container. You will typically configure one or more of the following button properties:

Config Property Description
text String. The button label.
ui String. Configures the look and feel of the button. Valid options are normal (default), back, round, action, forward, plain, confirm, and decline.
iconCls String. A css class that sets a background image to be used as the icon for the button.
iconMask Boolean. Must be set to true if specifying an iconCls property.
iconAlign String. Configures the position of the button icon in relation to the button's text label.
badgeText String. The text to display as a small badge on the button.
hidden Boolean. Set to true to initially hide the button from view.

The following example demonstrates how to add themed buttons to your toolbars:

Implementing different kinds of buttons
Ext.define('MyApp.view.MyContainer', {
 extend: 'Ext.Container',
 config: {
  items: [
   {
    xtype: 'titlebar',
    docked: 'top',
    title: 'Acme Buttons',
    items: [
     {
      xtype: 'button',
      ui: 'back',
      text: 'Prev'
     },
     {
      xtype: 'button',
      align: 'right',
      ui: 'forward',
      text: 'Next'
     }
    ]
   },
   {
     xtype: 'toolbar',
     docked: 'bottom',
     title: '',
     layout: {
      pack: 'center',
      type: 'hbox'
     },
     items: [
      {
       xtype: 'button',
       ui: 'confirm',
       text: 'Confirm'
      },
      {
       xtype: 'button',
       ui: 'decline',
       text: 'Abort'
      },
      {
       xtype: 'button',
       iconCls: 'home',
       iconMask: true,
       text: 'Call Home'
      }
     ]
    }
   ]
 }
});

Using Custom Button Icons

Sencha Touch ships with over 200 icons, located in the /touch2/resources/themes/images/default/pictos folder, that you can use to theme your buttons. In order to reduce the number of http transactions that your app requires, Sencha Touch contains a utility that puts these "pictos" through a process called base-64 encoding that converts the png file into plain text and inserts it into your application's stylesheet.

A few of the more than 200 pictos that ship with Sencha Touch

The icon encoding process is handled by SASS (Syntactically Awesome Style Sheets) - a stylesheet compiler. Sencha Touch projects generated by Sencha Cmd 3 contain a sample SASS stylesheet (app.scss) that you can easily modify to theme your application.

The process for encoding and using icons is as follows:

  1. Open /path/to/app/resources/sass/app.scss in a text editor
  2. At the bottom of the file, insert the following code to encode the application icon of your choosing:

    @include pictos-iconmask('pictoFileNameWithoutFileExtension');

  3. Compile the app.scss file into a css file by opening a command prompt to your app's resources/sass folder and issuing the following command:

    compass watch .

  4. Add an iconCls property to your button that corresponds to the arguments that you passed to the pictos-iconmask function from step 2.

For example, lets assume that you wanted to use the attachment.png file, located in the pictos folder, to theme a button. Your app.scss file would need to have the following line of code:

@include pictos-iconmask('attachment');

Your corresponding button declaration would need to resemble the following:

{
 xtype: 'button'
 text: 'some text',
 iconCls: 'attachment',
 iconMask: true
}

Note: Custom theming is covered in more detail later in this course.

Page of 168
comments powered by Disqus