[CLOSED][3.x] Potential bug in AnchorLayout??

[Animal]

I have just been tearing my hair out over a weird problem with layouts where they were not reflowing properly.

I tracked it down finally to AnchorLayout. There's nothing technically wrong with the code:



onLayout : function(ct, target){
Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target);

var size = this.getAnchorViewSize(ct, target);

var w = size.width, h = size.height;

if(w < 20 && h < 20){
return;
}

// find the container anchoring size
var aw, ah;
if(ct.anchorSize){
if(typeof ct.anchorSize == 'number'){
aw = ct.anchorSize;
}else{
aw = ct.anchorSize.width;
ah = ct.anchorSize.height;
}
}else{
aw = ct.initialConfig.width;
ah = ct.initialConfig.height;
}

var cs = ct.items.items, len = cs.length, i, c, a, cw, ch;
for(i = 0; i < len; i++){
c = cs[i];
if(c.anchor){
a = c.anchorSpec;
if(!a){ // cache all anchor values
var vs = c.anchor.split(' ');
c.anchorSpec = a = {
right: this.parseAnchor(vs[0], c.initialConfig.width, aw),
bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah)
};
}
cw = a.right ? this.adjustWidthAnchor(a.right(w), c) : undefined;
ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h), c) : undefined;

if(cw || ch){
c.setSize(cw || undefined, ch || undefined);
}
}
}
},


But for some reason the Javascript runtime was refusing to see the function a.right as a truthy value, and so was setting cw to undefined.

I'd break at that line, and I could switch to the console and evaluate that whole expression and the value would come out as the correctly adjusted width, but when clicking Step into on that line, it just stepped over and cw ended up undefined.

I don't know in what circumstances the runtime does this, but the following more explicit test fixed it for me:



onLayout : function(ct, target){
Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target);

var size = this.getAnchorViewSize(ct, target);

var w = size.width, h = size.height;

if(w < 20 && h < 20){
return;
}

// find the container anchoring size
var aw, ah;
if(ct.anchorSize){
if(typeof ct.anchorSize == 'number'){
aw = ct.anchorSize;
}else{
aw = ct.anchorSize.width;
ah = ct.anchorSize.height;
}
}else{
aw = ct.initialConfig.width;
ah = ct.initialConfig.height;
}

var cs = ct.items.items, len = cs.length, i, c, a, cw, ch;
for(i = 0; i < len; i++){
c = cs[i];
if(c.anchor){
a = c.anchorSpec;
if(!a){ // cache all anchor values
var vs = c.anchor.split(' ');
c.anchorSpec = a = {
right: this.parseAnchor(vs[0], c.initialConfig.width, aw),
bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah)
};
}
cw = Ext.isFunction(a.right) ? this.adjustWidthAnchor(a.right(w), c) : undefined;
ch = Ext.isFunction(a.bottom) ? this.adjustHeightAnchor(a.bottom(h), c) : undefined;

if(cw || ch){
c.setSize(cw || undefined, ch || undefined);
}
}
}
},

[evant]

Out of interest, was this happening in all browsers?

[Animal]

Yes. It was really strange. None of my anchor layouts (ie forms) would lay out properly.

[aconran]

So are you using an override at this point? Are you able to reproduce this?

[Animal]

I can't reproduce it in an example page. I've been trying to create a version of examples/layout/complex.html to reproduce it, and I can't.

But yes, I am using an override which uses Ext.isFunction instead of a truth test. I just can't figure it out. Stepping through in Firebug would step over the statement with just a truth test!

[mjlecomte]

Checking in here to see if there's any update. Looks like this one's is still marked INFOREQ seeking further information before elevating to OPEN status.

[mjlecomte]

This thread has remained in INFOREQ status for some time now and I don't see any test case posted as requested per http://extjs.com/forum/showthread.php?p=341947#post341947.

I'm going to update the status to CLOSED in absence of a test case. Please post a test case to have the issue reopened.