Chapter 12. Menus, Buttons, and Toolbars
This chapter covers
- Learning about Menus and how they work
- Styling your Menus with freely available 16 x 16 gif icons
- Dealing with complex Menu Items
- Attaching a Menu to a Button
- Displaying and stylizing a custom Item in a submenu
- Grouping Buttons together
- Implementing Toolbars
- Using Ext.Action to configure Buttons
In the chapters leading up to this one, we’ve configured and used Menus, Buttons and Toolbars, but we never got to take a moment to really look at these widgets and learn more about them and what else they have to offer. You might ask, “Why are these three lumped into one chapter?” The answer is simple. Their use cases are related in one way or another. For instance, a Button can be configured to display a Menu, and a Toolbar can contain that Button.
For this reason we’ll take an in-depth look at the Ext.menu and Item classes, where you’ll learn how to display menu-specific Items in a Menu. We’ll even dive into displaying non-Menu Items.
Afterward, we’ll focus on the Button class and its cousin the SplitButton, where you’ll learn about things such as how to change the inner Button layout and how to attach a Menu to it.
Once you become more familiar with the Button class, we’ll create clusters of buttons, known as ButtonGroups. We’ll even take a moment to create a ButtonGroup that emulates one from Microsoft Word 2007’s famous ribbon toolbar.