Placing buttons in a toolbar

You can embed different types of components in a toolbar. This topic teaches you how to build a toolbar that contains image-only, text-only and image/text buttons, a toggle button, and a combo box.

making-progress-menus-and-toolbars-using-ext-js-30-part-1-img-0

How to do it

Create the styles for the toolbar items:

#tbar
{
  width:600px;
}
.icon-data
{
  background:url(img/data.png) 0 no-repeat !important;
}
.icon-chart
{
  background:url(img/pie-chart.png) 0 no-repeat !important;
}
.icon-table
{
  background:url(img/table.png) 0 no-repeat !important;
}

Define a data store for the combo box:

Ext.onReady(function() {
  Ext.QuickTips.init();
  var makesStore = new Ext.data.ArrayStore({
    fields: ['make'],
    data: makes // from cars.js
  });

Create a toolbar and define the buttons and combo box inline:

var tb = new Ext.Toolbar({
  renderTo: 'tbar',
  items: [{
    iconCls: 'icon-data',
    tooltip: 'Icon only button',
    handler:clickHandler
  }, '-',
  {
    text: 'Text Button'
  }, '-',
  {
    text: 'Image/Text Button',
    iconCls: 'icon-chart'
  }, '-',
  {
    text: 'Toggle Button',
    iconCls: 'icon-table',
    enableToggle: true,
    toggleHandler: toggleHandler,
    pressed: true
  }, '->', 'Make: ',
  {
    xtype: 'combo',
    store: makesStore,
    displayField: 'make',
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all',
    emptyText: 'Select a make...',
    selectOnFocus: true,
    width: 135
  }]
});

Finally, create handlers for the push button and the toggle button:

function clickHandler(btn) {
  Ext.Msg.alert('clickHandler', 'button pressed');
}
function toggleHandler(item, pressed) {
  Ext.Msg.alert('toggleHandler', 'toggle pressed');
}

How it works

The buttons and the combo box are declared inline. While the standard button uses a click handler through the handler config option, the toggle button requires the toggleHandler config option.The button icons are set with the iconCls option, using the classes declared in the first step of the topic.

As an example, note the use of the Toolbar.Separator instances in this fragment:

}, '-', {
  text: 'Text Button'
}, '-', {
  text: 'Image/Text Button',
  iconCls: 'icon-chart'
}, '-', {

Using '-' to declare a Toolbar.Separator is equivalent to using xtype: 'tbseparator'. Similarly, using '->' to declare Toolbar.Fill is equivalent to using xtype:'tbfill'.

Working with the new ButtonGroup component

A welcome addition to Ext JS is the ability to organize buttons in groups. Here's how to create a panel with a toolbar that contains two button groups:

making-progress-menus-and-toolbars-using-ext-js-30-part-1-img-1

How to do it

Create the styles for the buttons:

#tbar
{
  width:600px;
}
.icon-data
{
  background:url(img/data.png) 0 no-repeat !important;
}
.icon-chart
{
  background:url(img/pie-chart.png) 0 no-repeat !important;
}
.icon-table
{
  background:url(img/table.png) 0 no-repeat !important;
}
.icon-sort-asc
{
  background:url(img/sort-asc.png) 0 no-repeat !important;
}
.icon-sort-desc
{
  background:url(img/sort-desc.png) 0 no-repeat !important;
}
.icon-filter
{
  background:url(img/funnel.png) 0 no-repeat !important;
}

Define a panel that will host the toolbar:

Ext.onReady(function() {
  var pnl = new Ext.Panel({
    title: 'My Application',
    renderTo:'pnl-div',
    height: 300,
    width: 500,
    bodyStyle: 'padding:10px',
    autoScroll: true,

Define a toolbar inline and create two button groups:

tbar: [{
  xtype: 'buttongroup',
  title: 'Data Connections',
  columns: 1,
  defaults: {
    scale: 'small'
  },
  items: [{
    xtype:'button',
    text: 'Data Sources',
    iconCls:'icon-data'
  }, {
      xtype: 'button',
      text: 'Tables',
      iconCls: 'icon-table'
  }, {
      xtype: 'button',
      text: 'Reports',
      iconCls: 'icon-chart'
  }]
}, {
    xtype: 'buttongroup',
    title: 'Sort & Filter',
    columns: 1,
    defaults: {
      scale: 'small'
    },
    items: [{
      xtype: 'button',
      text: 'Sort Ascending',
      iconCls: 'icon-sort-asc'
    }, {
        xtype: 'button',
        text: 'Sort Descending',
        iconCls: 'icon-sort-desc'
    }, {
        xtype: 'button',
        text: 'Filter',
        iconCls: 'icon-filter'
  }]
}]

How it works

Using a button group consists of adding a step to the process of adding buttons, or other items, to a toolbar. Instead of adding the items directly to the toolbar, you need to firstly define the group and then add the items to the group:

tbar: [{
  xtype: 'buttongroup',
  title: 'Data Connections',
  columns: 1,
  defaults: {
    scale: 'small'
  },
  items: [{
    xtype:'button',
    text: 'Data Sources',
    iconCls:'icon-data'
  }, {
      xtype: 'button',
      text: 'Tables',
      iconCls: 'icon-table'
  }, {
      xtype: 'button',
      text: 'Reports',
      iconCls: 'icon-chart'
  }]
}

Placing menus in a toolbar

In this topic, you will see how simple it is to use menus inside a toolbar. The panel's toolbar that we will build, contains a standard button and a split button, both with menus:

making-progress-menus-and-toolbars-using-ext-js-30-part-1-img-2

How to do it

Create the styles for the buttons:

#tbar
{
  width:600px;
}
.icon-data
{
  background:url(img/data.png) 0 no-repeat !important;
}
.icon-chart
{
  background:url(img/pie-chart.png) 0 no-repeat !important;
}
.icon-table
{
  background:url(img/table.png) 0 no-repeat !important;
}

Create a click handler for the menus:

Ext.onReady(function() {
  Ext.QuickTips.init();
  var clickHandler = function(action) {
    alert('Menu clicked: "' + action + '"');
};

Create a window to host the toolbar:

var wnd = new Ext.Window({
  title: 'Toolbar with menus',
  closable: false,
  height: 300,
  width: 500,
  bodyStyle: 'padding:10px',
  autoScroll: true,

Define the window's toolbar inline, and add the buttons and their respective menus:

tbar: [{
  text: 'Button with menu',
  iconCls: 'icon-table',
  menu: [
    { text: 'Menu 1',
      handler:clickHandler.createCallback('Menu 1'),
      iconCls: 'icon-data' },
    { text: 'Menu 1',
      handler: clickHandler.createCallback('Menu 2'),
      iconCls: 'icon-data'}]
}, '-',
{
  xtype: 'splitbutton',
  text: 'Split button with menu',
  iconCls: 'icon-chart',
  handler: clickHandler.createCallback('Split button with
    menu'),
  menu: [
    { text: 'Menu 3',
      handler: clickHandler.createCallback('Menu 3'),
      iconCls: 'icon-data' },
    { text: 'Menu 4',
      handler: clickHandler.createCallback('Menu 4'),
      iconCls: 'icon-data'}]
  }]
});

Finally, show the window:

How it works

This is a simple procedure. Note how the split button is declared with the xtype: 'splitbutton' config option. Also, observe how the createCallback() function is used to invoke the clickHandler() function with the correct arguments for each button.

Commonly used menu items

To show you the different items that can be used in a menu, we will build a menu that contains radio items, a checkbox menu, a date menu, and a color menu.This is how the radio options and checkbox menu will look:

making-progress-menus-and-toolbars-using-ext-js-30-part-1-img-3

The Pick a Date menu item will display a date picker, as shown in the next screenshot:

making-progress-menus-and-toolbars-using-ext-js-30-part-1-img-4

The Pick a Color menu item displays a color picker, as seen here:

making-progress-menus-and-toolbars-using-ext-js-30-part-1-img-5

How to do it

Create a handler for the checkbox menu:

Ext.onReady(function() {
  Ext.QuickTips.init();
  var onCheckHandler = function(item, checked) {
    Ext.Msg.alert('Menu checked', item.text + ', checked: ' +
    (checked ? 'checked' : 'unchecked'));
  };

Define a date menu:

var dateMenu = new Ext.menu.DateMenu({
  handler: function(dp, date) {
    Ext.Msg.alert('Date picker', date);
  }
});

Define a color menu:

var colorMenu = new Ext.menu.ColorMenu({
  handler: function(cm, color) {
    Ext.Msg.alert('Color picker', String.format('You picked
    {0}.', color));
  }
});

Create a main menu. Now add the date and color menus, as well as a few inline menus:

var menu = new Ext.menu.Menu({
  id: 'mainMenu',
  items: [{
    text: 'Radio Options',
    menu: {
      items: [
        '<b>Choose a Theme</b>',
        {
          text: 'Aero Glass',
          checked: true,
          group: 'theme',
          checkHandler: onCheckHandler
        }, {
            text: 'Vista Black',
            checked: false,
            group: 'theme',
            checkHandler: onCheckHandler
        }, {
            text: 'Gray Theme',
            checked: false,
            group: 'theme',
            checkHandler: onCheckHandler
        }, {
            text: 'Default Theme',
            checked: false,
            group: 'theme',
            checkHandler: onCheckHandler
        }
      ]
    }
  },
  {
    text: 'Pick a Date',
    iconCls: 'calendar',
    menu: dateMenu
  },
  {
    text: 'Pick a Color',
    menu: colorMenu
  },
  {
    text: 'The last menu',
    checked: true,
    checkHandler: onCheckHandler
  }]
});

Create a toolbar and add the main menu:

var tb = new Ext.Toolbar({
  renderTo: 'tbar',
  items: [{
    text: 'Menu Items',
    menu: menu
  }]
});

How it works

After defining the date and color pickers, the main menu is built. This menu contains the pickers, as well as a few more items that are defined inline.

To display checked items (see the checked: true config option) with a radio button instead of a checkbox, the menu items need to be defined using the group config option. This is how the theme selector menu is built:

menu: {
  items: [
    '<b>Choose a Theme</b>',
    {
      text: 'Aero Glass',
      checked: true,
      group: 'theme',
      checkHandler: onCheckHandler
    },
    {
      text: 'Vista Black',
      checked: false,
      group: 'theme',
      checkHandler: onCheckHandler