Making Progress with Menus and Toolbars using Ext JS 3.0: Part 1

Share this page via Facebook, Twitter or LinkedIn.

Your message has been sent.

How would you like to send this article:

Save this article to your account for easy access.

by Jorge Ramon | October 2009 | Cookbooks Open Source

In this two-part article by Jorge Ramon, you will learn how to use menus, toolbars, and progress bars. Along with an examination of the commonly used menu items, the topics in this article will teach you how to work with the new ButtonGroup component as well as the different ways to set up toolbars and progress bars in your applications.

This article teaches you about the following topics:

Placing buttons in a toolbar
Working with the new ButtonGroup component
Placing menus in a toolbar
Commonly used menu items

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.

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:

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:

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:

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

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

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

Ext JS 3.0 Cookbook

Clear step-by-step recipes for building impressive rich internet applications using the Ext JS JavaScript library

Published: October 2009
eBook Price: $29.99
Book Price: $49.99
See more

Select your format and quantity:

About the Author :

Jorge Ramon is the Vice President of Development for Taladro Systems LLC, where he has led the design and development of a number of software products for the law industry—including QwikTime™ and LawDrill™.

Jorge has over 16 years of experience as a software developer and has also worked creating web applications, search engines, and automatic-control software. He actively contributes to the software development community through his blog: MiamiCoder.com.