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
}
},' ']
}),
// ...
});
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:
