Tips and tricks for LAMP (Linux Apache MySQL PHP) developers.

When I cant find a suitable solution to a problem and have to work it out for myself I'll post the result here so hopefully others will find it useful. (All code is offered in good faith. It may not be the best solution, just a solution).

Thursday, 1 May 2008

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: