PDA

View Full Version : [share] ExtJS hack: Add multiple toolbars to a Panel



JetMah
20 Mar 2010, 3:58 AM
hack code:


/**
* ExtJS hack: Add multiple toolbars to a Panel
*
* @author Jet Ma (jetmah(at)gmail(dot)com)
*/
// rename the original onRender method to avoid call itself
Ext.Panel.prototype.originalonRender = Ext.Panel.prototype.onRender;

// override onRender method
Ext.Panel.prototype.onRender = function(ct, position) {
this.originalonRender(ct, position);

// use the custom rowtbar argument to add it to this TopToolbar
if(this.tbar && this.rowtbar){
var rowtbar = this.rowtbar;
if(!Ext.isArray(rowtbar))
return;

for(var i = 0; i < rowtbar.length; i ++) {
new Ext.Toolbar(rowtbar[i]).render(this.tbar);
}
}

// use the custom rowbbar argument to add it to this BottomToolbar
if(this.bbar && this.rowbbar) {
var rowbbar = this.rowbbar;
if(!Ext.isArray(rowbbar))
return;

for(var i = 0; i < rowbbar.length; i ++) {
new Ext.Toolbar(rowbbar[i]).render(this.bbar);
}
}
}


usage:


var panel = new Ext.Panel({
//...
tbar: [{text: 'button one'}, {text: 'button two'}],
rowtbar: [
[{text: 'row1 buttone 1'}, {text: 'row1 button2'}],
[{text: 'row2 buttone 1'}, {text: 'row2 button2'}]
],
bbar: [{text: 'button one'}, {text: 'button two'}],
rowbbar: [
[{text: 'row1 buttone 1'}, {text: 'row1 button2'}],
[{text: 'row2 buttone 1'}, {text: 'row2 button2'}]
]
});


screenshot:

20 Mar 2010, 9:55 AM
..........or, you can setup one MASTER Toolbar with a specific height and use the anchor or vbox layouts. Then set the master toolbar's children as other toolbars.

Bobrovnik
20 Mar 2010, 11:20 AM
Thanks for sharing, I was just looking for such thing

hworg
28 Mar 2010, 5:27 PM
..........or, you can setup one MASTER Toolbar with a specific height and use the anchor or vbox layouts. Then set the master toolbar's children as other toolbars.

could you please provided a small sample code that would show your approach? I tried but I'm just getting a blank toolbar rather than 2 toolbars.

thanks

meroy
28 Mar 2010, 6:23 PM
As Jay has mentioned above, both the anchor or vbox layout can be used to achieve a multi-row toolbar.

Here's an example utilizing the anchor layout for the tbar and the vbox layout for the fbar.

Both work equally well.



new Ext.Panel({
title : 'Panel with many toolbars',
renderTo : document.body,
border : true,
width : 600,
height : 400,
html : '... content ...',

tbar : { // configured using the anchor layout
xtype : 'container',
layout : 'anchor',
height : 27 * 3,
defaults : { height : 27, anchor : '100%' },

items : [
new Ext.Toolbar({
items : [{
'text' : 'tbar 1'
},'-',{
'text' : 'button 1'
}]
}),
new Ext.Toolbar({
items : [{
'text' : 'tbar 2'
},'-',{
'text' : 'button 2'
}]
}),
new Ext.Toolbar({
items : [{
'text' : 'tbar 3'
},'-',{
'text' : 'button 3'
}]
})
]
},

bbar : { // configured using the vbox layout
xtype : 'container',
layout : {
type : 'vbox',
pack : 'start',
align : 'stretch'
},
height : 27 * 3,
defaults : { flex : 1 },

items : [
new Ext.Toolbar({
items : [{
'text' : 'bbar 1'
},'-',{
'text' : 'button 1'
}]
}),
new Ext.Toolbar({
items : [{
'text' : 'bbar 2'
},'-',{
'text' : 'button 2'
}]
}),
new Ext.Toolbar({
items : [{
'text' : 'bbar 3'
},'-',{
'text' : 'button 3'
}]
})
]
}

});



Cheers,
Mario

Sarika
11 Jun 2013, 5:17 AM
this really helped me. thanx a lot :)

bigakash
21 May 2015, 10:15 PM
yes that is really very helpful:>

mitchellsimoens
22 May 2015, 6:39 AM
I'm moving this to the Ext JS 3 forum as this is not relevant to Ext JS 4+ (use dockedItems to hold multiple docked toolbars)