Custom ExtJS header buttons

ExtJS Panels can have a limited range of buttons on the header bar but what if you want a custom button? These can be added to a toolbar just underneath the header but if space is at a premium or perhaps you only want one button it's not always ideal.

One solution is to have no header and just make the toolbar look like a header:

var obj_panel = new Ext.Panel({
 tbar: new Ext.Toolbar({
// make the toolbar background look like a header
 cls: 'x-panel-header',
 height: 25,
 items: [
// give the toolbar a title which looks like a Panel title
  '<span style="color:#15428B; font-weight:bold">Title Here</span>',
  '->', //fill element
  {
   text: 'Button Text',
   iconCls: 'add', // optional icon class
   handler: function() {
   // do stuff here
  }
 },' ']
 }),
// ...
});

(The styles used above fit the standard ExtJS theme)

This produces something like this: