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:

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;
   }
   .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. 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. 3. Define a toolbar inline and create two button groups:

   tbar: [{
   xtype: 'buttongroup...