View Full Version : Buttons on panel header

12 Jul 2008, 7:39 AM
i've search some time on the net how to put buttons on the header of a panel (not tools)
with no success so i've decided to make MyPanel with topBottons. Here is the code.

Ext.MyPanel = Ext.extend(Ext.Panel, {
topButtons : null,

addTopButton : function (buttonConfig){

var button = Ext.ComponentMgr.create(buttonConfig, 'button');
var buttonDiv = Ext.DomHelper.insertFirst
(this.header, {tag:"div", style:"height:15px;float:right;margin-top:-3px;margin-left:3px;"}, true);
onRender : function (ct, position){

Ext.MyPanel.superclass.onRender.apply(this, arguments);
if(this.topButtons != null){
for (var idx = 0; idx < this.topButtons.length; idx++) {
} else {

here is a sample of how to use it:

panel =

new Ext.MyPanel({

title : "Bla bla bla",

renderTo : Ext.getBody(),
collapsible : true,
topButtons :[


24 Jul 2008, 1:20 PM
I've had to do similar things in the past but rather than using DHTML in the fashion you did (which assumes that the core library won't change to the extent that your "insertFirst" will break something), I used nested panels:

What I wanted:
Viewport with Navigation panel on the left which has a Header section, a TreePanel for navigation and a Footer section. I want the "Header" and "Footer" to look like they're in the same "Panel" as the TreePanel (as the old saying goes, a picture is worth a thousand words so see attached screenshots for 2KWords worth of description ;)).

So I created my own "NavPanel" class as an extension of a "Panel" class...

to.NavPanel = Ext.extend(Ext.Panel, {
initComponent : function() {
this.layout = "border",
this.bodyStyle = "background: white; border: 1px solid #99BBE8",
this.frame = true,
this.items = [
new Ext.Panel({
id: "navPanelHead",
region: "north",
html : this.legend
} ),
new to.Navigator ({
id: "navPanelBody",
region : "center",
treeURI : this.treeURI,
rootNodeText : this.rootNodeText
new Ext.Panel({
id: "navPanelFoot",
region: "south",
html : "Here's my footer section"
} )


So for the "west" region of my Viewport I just dropped in my "to.NavPanel" rather than a standard Ext.Panel or even Ext.tree.TreePanel.

Now in my case I'm not using buttons but it's a trivial exercise to replace the Head (or even the Foot) panel with some simple Ext.Buttons.

Hope this example helps.

Mike B