PDA

View Full Version : How to add Button at the beginning of Toolbar after...



tigerclaw
28 Nov 2007, 9:43 AM
Hi all:

I have a function to add a Toolbar's Buttons dynamically as shown below:

function add_btn(tail, key, path, tip) {

var tBar = myPanel.getBottomToolbar();
var sBtn = new Ext.Toolbar.Button({
id : key,
icon: path,
tooltip: {text: tip, title: 'Tip', autoHide:true},
cls : 'x-btn-icon' });

if(tail == 1)
tBar.add('->', sBtn);
else
tBar.add(sBtn); //questionable line to add button at bar's beginning.
}

But once I added some buttons at the end of the Toolbar as shown below:

add_btn(1, 'button-1', path_x, tip);
add_btn(1, 'button-2', path_x, tip);

then, later I can not add a button at the beginning of the toolbar by calling:

add_btn(0, 'button-3', path_y, tip);

Can anyone help me correcting the preceeding function's code so that I can add the button at the toolbar's end and/or beginning dynamically?

Thanks a lot in advance.

tryanDLS
28 Nov 2007, 10:13 AM
I don't think you can add a Button instance via toolbar.add(). Try doing it with button config objects.

28 Nov 2007, 10:29 AM
yeah you can. ;)

I've added combo boxes and buttons.

I do not believe that there is a way, however, to insert buttons at a specific location. It's a matter of appending to the node list. :-\

tdondich
28 Nov 2007, 11:56 AM
Well, there's two ways to do this. Add buttons in your config and setVisibility of those buttons to false so they're hidden. Then manipulate them when you want. OR....

We can add to Ext.Toolbar's class. Or extend the class with this code. I've changed Toolbar's addButton method to be:



addButton : function(config, position){
if(position == undefined) {
position = this.tr.childNodes.length + 1;
}

if(config instanceof Array){
var buttons = [];
for(var i = 0, len = config.length; i < len; i++) {
buttons.push(this.addButton(config[i]));
}
return buttons;
}
var b = config;
if(!(config instanceof T.Button)){
b = config.split ?
new T.SplitButton(config) :
new T.Button(config);
}

if(position >= this.tr.childNodes.length || position < 0) {
td = this.nextBlock();
}
else {
td = this.getPositionBlock(position);
}
this.initMenuTracking(b);
b.render(td);
this.items.add(b);
return b;
},


Added a new method called getPositionBlock, which is:



getPositionBlock: function(position) {
var td = document.createElement("td");
this.tr.insertBefore(td, this.tr.childNodes[position]);
return td;
},


You can omit the 2nd param to addButton if you want the default behavior to be adding to the end. Or, you can put the index that you want, and the button will be put at that position. Use position = 0 to have it insert the button at the beginning of the toolbar. With this, you can inject buttons in whatever location you want.

tigerclaw
29 Nov 2007, 9:24 AM
Thanks to everyone, especially thank tdondich. :)

tdondich
30 Nov 2007, 2:48 AM
Is this something we could make part of extjs?

moegal
3 Aug 2009, 6:58 AM
I am sure there is a better way to do this but here is what I am using to add buttons to the htmleditor in 2.3.



Ext.override(Ext.Toolbar, {
addButton : function(config, position){
if(position == undefined) {
position = this.tr.childNodes.length + 1;
}

if(config instanceof Array){
var buttons = [];
for(var i = 0, len = config.length; i < len; i++) {
buttons.push(this.addButton(config[i]));
}
return buttons;
}
var b = config;
if(!(config instanceof Ext.Button)){
b = config.split ?
new Ext.SplitButton(config) :
new Ext.Button(config);
}
if(position >= this.tr.childNodes.length || position < 0) {
td = this.nextBlock();
}
else {
td = this.getPositionBlock(position);
}
this.initMenuTracking(b);
b.render(td);
this.items.add(b);
return b;
},
addSeparator : function(position){
if(position == undefined) {
position = this.tr.childNodes.length + 1;
}
var b = new Ext.Toolbar.Separator();
if(position >= this.tr.childNodes.length || position < 0) {
td = this.nextBlock();
}
else {
td = this.getPositionBlock(position);
}
this.initMenuTracking(b);
b.render(td);
this.items.add(b);
return b;
},
getPositionBlock: function(position) {
var td = document.createElement("td");
this.tr.insertBefore(td, this.tr.childNodes[position]);
return td;
}
});


Then



listeners: {
render: function(component){
var chatSubmit = new Ext.Toolbar.Button({
text:'Submit',
iconCls: Ext.ux.TDGi.iconMgr.getIcon('database_refresh')
});
var chatSmileys = new Ext.Toolbar.Button({
text:'Smileys',
iconCls: Ext.ux.TDGi.iconMgr.getIcon('database_refresh')
});
component.getToolbar().addButton(chatSmileys,0);
component.getToolbar().addSeparator(1);
component.getToolbar().add('->');
component.getToolbar().addButton(chatSubmit);
}
}


Marty

Animal
3 Aug 2009, 7:03 AM
It's just a lot easier to upgrade to Ext 3.0, and use Toolbar as a Container

moegal
3 Aug 2009, 8:43 AM
we are not ready to upgrade just yet, but I am looking forward to using 3.0.

Thanks, Marty