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:

7 comments:

codeminer said...

it helped me! thanks

Dado said...

Thank you very much for sharing this great tip!

polawat phetra said...

enlighten me.. thanks

Rahul said...

thanks a lot for the tip!

Anonymous said...

Just what I was looking for. Thanks!

Albert Crespi said...

Thank you very much!! It helped me so much!

PowerPete said...

Super!