HOWTO: add a toolbar to a treepanel or gridpanel

[bitdifferent]

If you want a toolbar attached to a grid, it's pretty easy:




var MyGrid = //grid definition here
var MyGridHeader = MyGrid.getView().getHeaderPanel(true);
var MyToolBar = new Ext.Toolbar ( MyGridHeader,
[ //buttons definition here, eg...
{ cls:'x-btn-text-icon',
icon: '/img/silk/add.png',
text: 'Add item',
handler: MyHandlerFunctionName //or an anonymous inline function
}
]
);


However, you can't do this in quite the same way with a TreePanel - it took me ages and eventually Bernard helped me out on IRC - and it's even simpler.

the html:


<div id="MyTreeContainer">
<div id="MyToolbarContainer"></div>
</div>


the js:


// building the treePanel
this.menuTree = new Ext.tree.TreePanel("MyTreeContainer"[...]); //normal tree definition

// building the toolbar
var tb = new Ext.Toolbar('MyToolbarContainer');

// adding a button
tb.addButton({text: "foo", id: 'foo', cls: 'x-btn-text-icon your-icon-class', handler: function(){alert("foo")}, scope: this});


This seems obvious now but I was putting a full borderlayout inside MyTreeContainer and then putting the TreePanel in a ContentPanel in a Region in a.... etc.

Thanks Bernard!

Matt S

[keithcelt]

Correct me if I'm wrong, but I could only get the toolbar to add if I rendered the grid first. Something like this:



var MyGrid = //grid definition here

// I could not get it to work without this
MyGrid.render();

var MyGridHeader = MyGrid.getView().getHeaderPanel(true);
var MyToolBar = new Ext.Toolbar ( MyGridHeader,
[ //buttons definition here, eg...
{ cls:'x-btn-text-icon',
icon: '/img/silk/add.png',
text: 'Add item',
handler: MyHandlerFunctionName //or an anonymous inline function
}
]
);

Other than that, great tip bit! Saved me some time.

Cheers,

Keith