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

Exclusive offer: get 50% off this eBook here
Ext JS 3.0 Cookbook

Ext JS 3.0 Cookbook — Save 50%

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

$29.99    $15.00
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.

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

How to do it

  1. 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;
      }
  2. 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
      });

  3. 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
      }]
      });

  4. 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'.

See also...

  • The next recipe, Working with the new ButtonGroup component, explains how to use the ButtonGroup class to organize a series of related buttons

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 with Menus and Toolbars using Ext JS 3.0: Part 1

How to do it

  1. 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;
      }
  2. 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,

  3. 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'
}]
}

See also...

  • The next recipe, Placing buttons in a toolbar, illustrates how you can embed different types of components in a toolbar

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 with Menus and Toolbars using Ext JS 3.0: Part 1

How to do it

  1. 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;
      }

  2. Create a click handler for the menus:
      Ext.onReady(function() {
      Ext.QuickTips.init();
      var clickHandler = function(action) {
      alert('Menu clicked: "' + action + '"');
      };
  3. 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,
  4. 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'}]
      }]
      });
  5. Finally, show the window:
      wnd.show();

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.

See also...

  • The next recipe, Commonly used menu items, shows the different items that can be used in a menu

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 with Menus and Toolbars using Ext JS 3.0: Part 1

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

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

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

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

How to do it

  1. 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'));
      };
  2. Define a date menu:
      var dateMenu = new Ext.menu.DateMenu({
      handler: function(dp, date) {
      Ext.Msg.alert('Date picker', date);
      }
      });

  3. 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));
      }
      });
  4. 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
      }]
      });

  5. 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

See also...

  • The Placing buttons in a toolbar recipe (covered earlier in this article) illustrates how you can embed different types of components in a toolbar

>> Continue Reading Making Progress with Menus and Toolbars using Ext JS 3.0: Part 2

[ 1 | 2 ]

 

If you have read this article you may be interested to view :

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.

Books From Packt

Moodle 1.9 for Second Language Teaching
Moodle 1.9 for Second Language Teaching

eZ Publish 4: Enterprise Web Sites Step-by-Step
eZ Publish 4: Enterprise Web Sites Step-by-Step

Joomla! 1.5 Development Cookbook
Joomla! 1.5 Development Cookbook

Joomla! 1.5 SEO
Joomla! 1.5 SEO

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

Blender 3D 2.49 Incredible Machines
Blender 3D 2.49 Incredible Machines

SOA Cookbook
SOA Cookbook

Deep Inside osCommerce: The Cookbook
Deep Inside osCommerce: The Cookbook

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
k
p
W
D
H
s
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software