PDA

View Full Version : [2.0b1][SOLVED] Panel config: assigning Toolbar config to the 'tbar' option



kx
24 Oct 2007, 12:39 PM
I fairly searched the forum for my problem, but haven't found anything relevant. Sorry if that bug was described by someone else already.

Ext.Panel manual states that config.tbar value can be "a Ext.Toolbar object, a toolbar config, or an array of buttons configs".

As far as I understand that, it's supposed that one can assign a Ext.Toolbar config, so the toolbar instance itself will be created later when the panel renders. Sounds like a great idea.

But I can't.



Ext.onReady(function(){
new Ext.Panel({
title: 'Toolbar Window',
html: 'hello!',
renderTo: document.body,
tbar: {
height: 40,
items: [
{ text: 'Button One' },
{ text: 'Button Two' }
]
} // I believe that is a toolbar config
});
});


This code causes the error: "this.topToolbar.render is not a function ext-all-debug.js (line 15637)".

A short investigation revealed that at that location this.topToolbar is just a toolbar config that I've passed to the Panel, and for sure it has no render() method.

It seems that the following code fixes that (at least it worked for me, but I haven't done extensive testing).



// source/widgets/Panel.js (2.0 b1), line 560
// WAS:
if(this.tbar && this.topToolbar){
if(this.topToolbar instanceof Array){
this.topToolbar = new Ext.Toolbar(this.topToolbar);
}

this.topToolbar.render(this.tbar);
}

// FIX:
if(this.tbar && this.topToolbar){
if(this.topToolbar instanceof Array ||
(typeof this.topToolbar == "object" && !this.topToolbar.getXType)) {
// I'm newbie to Extjs; not sure that checking getXType
// is an acceptable way to determine whether the object is
// an Ext component or not
this.topToolbar = new Ext.Toolbar(this.topToolbar);
}
this.topToolbar.render(this.tbar);
}


Same with the bottomToolbar at the lines that follow.

Also I think some optimization is possible there. Elimination of the repeating code may save (just imagine! /:)) up to 160 bytes in the compressed ext-all.js, but seems a little bit cryptic at a first sight.



// render top and bottom toolbars
var tbShort = ['tbar', 'bbar'], tbLong = ['topToolbar', 'bottomToolbar'];
for (var i=0; i<2; i++) {
var tb = tbLong[i];
if (this[tbShort[i]] && this[tb]) {
if (this[tb] instanceof Array || (typeof this[tb] == 'object' && !this[tb].getXType)) {
this[tb] = new Ext.Toolbar(this[tb]);
}
this[tb].render(this[tbShort[i]]);
}
}

jay@moduscreate.com
24 Oct 2007, 7:42 PM
it works perfectly if you pass it button configs:



Ext.onReady(function(){
new Ext.Panel({
title: 'Toolbar Window',
html: 'hello!',
renderTo: document.body,
tbar: [

{ text: 'Button One' },
{ text: 'Button Two' }

]
});
});

jack.slocum
25 Oct 2007, 2:02 AM
This is a doc error. It excepts either a Toolbar object or an array of toolbar items.

Please add an entry in the doc error thread and we will get it cleaned up for the next release. Thanks!

mystix
25 Oct 2007, 2:26 AM
This is a doc error. It excepts either a Toolbar object or an array of toolbar items.

Please add an entry in the doc error thread and we will get it cleaned up for the next release. Thanks!

added to the doc bugs list under Ext.Panel.

also fixed in SVN ;)

correct version


/**
* @cfg {Object/Array} tbar
* The top toolbar of the panel. This can be either an {@link Ext.Toolbar} object or an array of
* buttons/button configs to be added to the toolbar. Note that this is not available as a property after render.
* To access the top toolbar after render, use {@link #getTopToolbar}.
*/

jcwatson11
2 Aug 2008, 9:17 PM
Hi All,

This would be such a simple fix, and would add flexibility to the lib if Ext adopted a solution similary to what kx proposed. For example, here's the current code:



if(this.bbar && this.bottomToolbar){
if(Ext.isArray(this.bottomToolbar)){
this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar);
}
this.bottomToolbar.render(this.bbar);
this.bottomToolbar.ownerCt = this;
}


This simple fix would actually add flexibility and functionality by allowing the developer to actually provide a toolbar config object, and we wouldn't have to change the docs. Is there any reason why we wouldn't adopt something like this, especially since it's such a simple change that would add flexibility?



if(this.bbar && this.bottomToolbar){
if(!this.bottomToolbar.render){
this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar);
}
this.bottomToolbar.render(this.bbar);
this.bottomToolbar.ownerCt = this;
}


Otherwise I'm going to have to override the enormous Panel.onRender function for a single line.

The top toolbar could be fixed the same way (immediately above the code in question).



if(this.tbar && this.topToolbar){
if(!this.topToolbar.render){
this.topToolbar = new Ext.Toolbar(this.topToolbar);
}
this.topToolbar.render(this.tbar);
this.topToolbar.ownerCt = this;
}


Thanks for your help!

jrussell.smyth
29 Oct 2008, 4:00 PM
This is a doc error. It excepts either a Toolbar object or an array of toolbar items.

Please add an entry in the doc error thread and we will get it cleaned up for the next release. Thanks!

It seems to me that this type of gross documentation error should be updated immediately in the online documentation at the very least, and not need to wait for a new "release"

It is understandable that your local copy will be frozen at the release you download, but the online docs should be able to take care of this type of error as they are found, with a disclaimer in docs "online documentation may be more current/accurate"

Seeing as this documentation error just cost me >1 hour dev time trying to figure out why it didnt work...

cyberwizzard
20 Nov 2008, 2:50 PM
For some reason the 2.2 docs still have the wrong description... Tbh I agree with the opinion to simply 'fix' ExtJS to support the direct config option as almost every construction in ExtJS uses this approach.

For now I'll work around it :)

stolsma
15 Dec 2008, 9:16 AM
For some reason the 2.2 docs still have the wrong description... Tbh I agree with the opinion to simply 'fix' ExtJS to support the direct config option as almost every construction in ExtJS uses this approach.

For now I'll work around it :)

Yep, today it took me again 2 hours before I remembered that the documentation was not correct and that I needed to use another solution (which I don't like at all visually...)
Archhhhhhh...... :">:(

Sander