Placing buttons in a toolbar

You can embed different types of components in a toolbar. This recipe 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...

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