PDA

View Full Version : [DEFER][3.x] Ext.Toolbar imposing its "internalDefaults"



Animal
9 Dec 2009, 12:24 AM
Those defaults depend upon it using the ToolbarLayout to lay itself out. They ensure that a Button's enclosing <TD> is removed/hidden on remove/hide.

But if another layout manager is used for a Toolbar (I use other layouts), this breaks that.

These settings must be imposed by the ToolbarLayout:



Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
monitorResize : true,
triggerWidth : 18,
lastOverflow : false,
forceLayout: true,

noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
// private
onLayout : function(ct, target){
if(!this.leftTr){
var align = ct.buttonAlign == 'center' ? 'center' : 'left';
target.addClass('x-toolbar-layout-ct');
target.insertHtml('beforeEnd',
'<table cellspacing="0" class="x-toolbar-ct"><tbody><tr><td class="x-toolbar-left" align="' + align + '"><table cellspacing="0"><tbody><tr class="x-toolbar-left-row"></tr></tbody></table></td><td class="x-toolbar-right" align="right"><table cellspacing="0" class="x-toolbar-right-ct"><tbody><tr><td><table cellspacing="0"><tbody><tr class="x-toolbar-right-row"></tr></tbody></table></td><td><table cellspacing="0"><tbody><tr class="x-toolbar-extras-row"></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>');
this.leftTr = target.child('tr.x-toolbar-left-row', true);
this.rightTr = target.child('tr.x-toolbar-right-row', true);
this.extrasTr = target.child('tr.x-toolbar-extras-row', true);
}
var side = ct.buttonAlign == 'right' ? this.rightTr : this.leftTr,
pos = 0,
items = ct.items.items;

for(var i = 0, len = items.length, c; i < len; i++, pos++) {
c = items[i];
if(c.isFill){
side = this.rightTr;
pos = -1;
}else if(!c.rendered){
Ext.apply(c, {removeMode: 'container', hideParent: true});
c.render(this.insertCell(c, side, pos));
}else{
if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){
var td = this.insertCell(c, side, pos);
td.appendChild(c.getPositionEl().dom);
c.container = Ext.get(td);
}
}
}
//strip extra empty cells
this.cleanup(this.leftTr);
this.cleanup(this.rightTr);
this.cleanup(this.extrasTr);
this.fitToSize(target);
},
...


and in Toolbar:



applyDefaults : function(c){
if(!Ext.isString(c)){
c = Ext.Toolbar.superclass.applyDefaults.call(this, c);
var d = this.internalDefaults;
if(c.events){
Ext.applyIf(c.initialConfig, d);
Ext.apply(c, d);
}else{
Ext.applyIf(c, d);
}
}
return c;
},

Condor
9 Dec 2009, 1:37 AM
You would also have to make a note in the docs that you need to set removeMode and hideParent yourself if you move rendered components into a toolbar.

Animal
9 Dec 2009, 1:45 AM
Or move the Ext.apply call to the top of the loop so that it stamps that config in all its children.

(of course either way, with this fix or without it, its children are "broken" if they are inserted into other Containers, but that's another unlikely scenario)

ggranum
16 Aug 2010, 4:43 PM
This is one of those bugs that isn't a big deal except when it is. This was horribly painful to debug, and every developer who ever wants to hide a button inside a toolbar with a custom layout is going to have to debug it.

It looks to me like someone meant to write


if(c.events){
Ext.applyIf(c.initialConfig, d);
Ext.apply(c, c.initialConfig);
}

but wrote:

if(c.events){
Ext.applyIf(c.initialConfig, d);
Ext.apply(c, d);
}

on 'accident'.