PDA

View Full Version : [solved] How to make a toolbar with 2 lines ?



Footeuz
22 Aug 2007, 12:10 AM
Hi,

My problem is that I have a layout with a west region and center region.

And in the west i have a toolbar on the top.
And too many buttons for the width.

Is it possible to add a tag br or similar to put some buttons on bottom of the toolbar, in a second line ???

Animal
22 Aug 2007, 12:27 AM
The current toolbar implements a 1 row table.

You could extend it, and add a new method to your Toolbar to specify which tr to use which would be called before adding a button:



/** Which row to use (zero based) for the next button creation. */
setNewButtonRow: function(n) {
var table= this.el.child("table");
if (n >= table.rows.length) {
this.tr = document.createElement("tr");
table.tbodies[0].appendChild(this.tr);
} else {
this.tr = table.rows[n];
}
}


YMMV, you'd have to debug this with Firebug, but it's a start...

Footeuz
22 Aug 2007, 12:57 AM
Thanks a lot animal !!

I did what you said and the right code for the function is :



// create constructor for new class
Ext.ToolbarRow = function(el){
Ext.ToolbarRow.superclass.constructor.call(this, el);
};

Ext.extend(Ext.ToolbarRow, Ext.Toolbar, {
setNewButtonRow: function(n) {
var table= this.el.child("table").dom;
if (n >= table.rows.length) {
this.tr = document.createElement("tr");
table.childNodes[0].appendChild(this.tr);
} else {
this.tr = table.rows[n];
}
}
});

var utilityToolbar = new Ext.ToolbarRow( 'source-files-tb' );
utilityToolbar.add({
id:'stri',
text:'Trier',
disabled:false,
cls:'x-btn-text-icon tri',
handler: tri_stree
});

utilityToolbar.setNewButtonRow(2);
utilityToolbar.addField( my_select );

Animal
22 Aug 2007, 2:04 AM
It works? http://www.mysmiley.net/imgs/smile/confused/confused0059.gif

What does it look like?

Footeuz
22 Aug 2007, 3:59 AM
Yes of course :)

I add too a function to add item but with colspan.
Because i had a problem on the second line.

Thanks for your help.

Now I have others bugs lol (like the sorter which does'nt work, the drag to the left who add many items, ... )

violinista
23 Aug 2007, 1:01 AM
You can see How I did it here:

http://extjs.com/forum/showthread.php?t=8381&highlight=two+row+toolbar