Creating a custom look for the status bar items

Customizing the look of toolbar items is relatively simple. In this recipe, you will learn how to create toolbar items with a sunken look that can be found in many desktop applications:

How to do it...

1. 1. Create the styles that will provide the custom look of the status bar text items:

   .custom-status-text-panel
   {
   border-top:1px solid #99BBE8;
   border-right:1px solid #fff;
   border-bottom:1px solid #fff;
   border-left:1px solid #99BBE8;
   padding:1px 2px 2px 1px;
   }
   

2. 2. Create a host panel:

   Ext.onReady(function() {
   var pnl = new Ext.Panel({
   title: 'Status bar with sunken text items',
   renderTo: 'pnl1',
   width: 400,
   height: 200,
   bodyStyle: 'padding:10px;',
   

3. 3. Define the panel's bbar with the text items:

   bbar: {
   id: 'sBar',
   items: [
   { id: 'cachedCount', xtype:'tbtext',
   text: 'Cached: 15' }, ' ',
   { id: 'uploadedCount', xtype: 'tbtext',
   text: 'Uploaded: 7' }, ' ',
   { id: 'invalidCount', xtype: 'tbtext',
   text: 'Invalid: 2' }
   ]
   },
   

4. 4. Now, add a handler for the afterrender...