Buttons, Menus, and Toolbars in Ext JS

by Colin Ramsay Shea Frederick Steve 'Cutter' Blades | June 2009 | AJAX Open Source

The unsung heroes of every application are the simple things like buttons, menus, and toolbars. In this article by Shea Frederick , Steve 'Cutter' Blades , and Colin Ramsay , we will cover how to add these items to our applications.

Our example will contain a few different types of buttons, both with and without menus. A button can simply be an icon, or text, or both. Toolbars also have some mechanical elements such as spacers and dividers that can help to organize the buttons on your toolbars items.

We will also cover how to make these elements react to user interaction.

 

A toolbar for every occasion

Just about every Ext component—panels , windows , grids can accept a toolbar on either the top or the bottom. The option is also available to render the toolbar standalone into any DOM element in our document. The toolbar is an extremely flexible and useful component that will no doubt be used in every application.

• Ext.Toolbar : The main container for the buttons
• Ext.Button : The primary handler for button creation and interaction
• Ext.menu : A menu

Toolbars

Our first toolbar is going to be rendered standalone in the body of our document. We will add one of each of the main button types, so we can experiment with each:

• Button—tbbutton : This is the standard button that we are all familiar with.
• Split Button—tbsplit : A split button is where you have a default button action and an optional menu. These are used in cases where you need to have many options in the same category as your button, of which there is a most commonly used default option.
• Menu—tbbutton+menu : A menu is just a button with the menu config filled in with options.

Ext.onReady(function(){
  new Ext.Toolbar({
    renderTo: document.body,
    items: [{
	xtype: 'tbbutton',
	text: 'Button'
    },{
	xtype: 'tbbutton',
	text: 'Menu Button',
	menu: [{
	  text: 'Better'
	},{
	  text: 'Good'
	},{
	  text: 'Best'
	}]
    },{
	xtype: 'tbsplit',
	text: 'Split Button',
	menu: [{
	   text: 'Item One'
	},{
	   text: 'Item Two'
	},{
	   text: 'Item Three'
        }]
     }]
  });
});

As usual, everything is inside our onReady event handler. The items config holds all of our toolbars elements—I say elements and not buttons because the toolbar can accept many different types of Ext components including form fields—which we will be implementing later on in this article.

The default xtype for each element in the items config is tbbutton. We can leave out the xtype config element if tbbutton is the type we want, but I like to include it just to help me keep track.

The button

Creating a button is fairly straightforward; the main config option is the text that is displayed on the button. We can also add an icon to be used alongside the text if we want to.

Here is a stripped-down button:

{
   xtype: 'tbbutton
',
   text: 'Button'
}

Menu

A menu is just a button with the menu config populated—it's that simple. The menu items work along the same principles as the buttons. They can have icons, classes, and handlers assigned to them. The menu items could also be grouped together to form a set of option buttons, but first let's create a standard menu.

This is the config for a typical menu config:

{
    xtype: 'tbbutton
',
    text: 'Button',
    menu
: [{
	text: 'Better'
    },{
	text: 'Good'
    },{
	text: 'Best'
    }]
}

As we can see, once the menu array config is populated, the menu comes to life. To group these menu items together, we would need to set the group config and the boolean checked value for each item:

menu: [{
    text: 'Better',
    checked: true,
    group: 'quality'
}, {
    text: 'Good',
    checked: false,
    group: 'quality'
}, {
    text: 'Best',
    checked: false,
    group: 'quality'
}]

Split button

The split button sounds like a complex component, but it's just like a button and a menu combined, with a slight twist. By using this type of button, you get to use the functionality of a button while adding the option to select an item from the attached menu. Clicking the left portion of the button that contains the text triggers the button action. However, clicking the right side of the button, which contains a small down arrow, triggers the menu.

{
    xtype: 'tbsplit
',
    text: 'Split Button',
    menu
: [{
	text: 'Item One'
    },{
	text: 'Item Two'
    },{
	text: 'Item Three'
    }]
}

Toolbar item alignment, dividers, and spacers

By default, every toolbar aligns elements to the leftmost side. There is no alignment config for a toolbar, so if we want to align all of the toolbar buttons to the rightmost side, we need to add a fill as the first item in the toolbar. If we want to have items split up between both the left and right sides, we can also use a fill:

{
   xtype: 'tbfill'
}

Pop this little guy in a tool-bar wherever you want to add space and he will push items on either side of the fill to the ends of the tool bar, as shown below:

We also have elements that can add space or vertical dividers, like the one used between the Menu Button and the Split Button .

The spacer adds a few pixels of empty space that can be used to space out buttons, or move elements away from the edge of the toolbar:

{
    xtype: 'tbspacer'
}

A divider can be added in the same way:

{
    xtype: 'tbseparator'
}

Shortcuts

Ext has many shortcuts that can be used to make coding faster. Shortcuts are a character or two that can be used in place of a configuration object. For example, consider the standard toolbar filler configuration:

{
    xtype: 'tbfill'
}

The shortcut for a toolbar filler is a hyphen and a greater than symbol:

'->'

Not all of these shortcuts are documented. So be adventurous, poke around the source code, and see what you can find. Here is a list of the commonly-used shortcuts:

 

http://www.packtpub.com/article/buttons-menus-toolbars-in-ext-js