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

Defining Toolbars

Page of 168

Toolbars can be docked at the left, top, bottom, or right of an Ext.panel.Panel component. They cannot be docked within the inherited classes, Ext.container.Container or Ext.Component. You can dock as many toolbars as you'd like through the dockedItems object as illustrated by the following code snippet:

Ext.define('MyApp.view.MyPanel', {
  extend: 'Ext.panel.Panel',
  html: 'My Panel',
  dockedItems: [
   {
     xtype: 'toolbar',
     dock: 'top',
     items: [
       {
        xtype: 'button', 
        text: 'Docked at the top' 
       }
     ] 
   },
   {
     xtype: 'toolbar',
     dock: 'bottom',
     items: [
       { 
        xtype: 'button',
        text: 'Docked at the bottom' 
       }
     ] 
   }
  ]
});

While you can place virtually any component inside of a toolbar, the following four components are typically only used inside of a toolbar:

xtype Description
tbfill Right-justifies all subsequent components in the items array.
tbseparator Inserts a vertical separator bar between toolbar items.
tbspacer Inserts horizontal space between toolbar items.
tbtext Renders text directly in a toolbar

Ext.button.Button (xtype: button) enables you to add highly themable buttons to your application. Buttons can have aligned icons, tooltips, and may be resized. They can also trigger dropdown menus and you can attach custom listeners for click, mouseover, and mouseout events. You can also define toggle buttons that can stay in a 'depressed' state until clicked.

Docking a toolbar

The following code snippet illustrates deploying a toolbar that contains different types of buttons and toolbar components:

Ext.define('MyApp.view.MyPanel', {
 extend: 'Ext.panel.Panel',
 title: 'My App Panel',
 dockedItems: [
  {
   xtype: 'toolbar',
   dock: 'top',
   items: [
    {
     xtype: 'tbtext',
     text: 'Welcome to My App'
    },
    { xtype: 'tbfill'},
    {
     xtype: 'cycle',
     showText: true,
     menu: {
      xtype: 'menu',
      width: 120,
      items: [
       {
        xtype: 'menucheckitem',
        text: 'Menu Item'
       },
       {
        xtype: 'menucheckitem',
        text: 'Menu Item'
       },
       {
        xtype: 'menucheckitem',
        text: 'Menu Item'
       }
      ]
     }
    },
    {
     xtype: 'button',
     text: 'Feedback'
    }
   ]
  }
 ]
});
Page of 168
comments powered by Disqus