Placing menus in a toolbar

In this recipe, 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...

1. 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. 2. Create a click handler for the menus:

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

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