PDA

View Full Version : [FIXED][3.0r5736] Anchor layout broken in Fx 3.5.x for OS X



jay@moduscreate.com
2 Dec 2009, 5:32 PM
OS X
Fx 3.5.x
Go to: examples/form/anchoring.html

See:
http://tdg-i.com/img/screencasts/2009-12-02_2028.png

More complex example (Ext JS in action final app):
http://tdg-i.com/img/screencasts/2009-12-02_2030.png

evant
2 Dec 2009, 5:39 PM
Jay, do you see the same thing on Windows, or is it only the Mac version? Because I couldn't reproduce it on Windows.

jay@moduscreate.com
2 Dec 2009, 7:19 PM
Evan,

Using a windows VM, I could not reproduce the problem. It's specific to OS X.

I'll try to dedicate some time tomorrow to see what's going on. Been busy working on the final app for the book.

I would like to suggest this as a critical bug, to be fixed before 3.1's deployment.

jay@moduscreate.com
3 Dec 2009, 6:04 AM
Just an FYI, I have confirmed this occurs with build 5700

jay@moduscreate.com
6 Dec 2009, 1:34 PM
stilll broken as of r5732

meroy
6 Dec 2009, 6:26 PM
Confirmed -- still broken with FF 3.5.x under Leopard.

Animal
7 Dec 2009, 1:06 AM
Could be that a horrible hack has to be implemented just for Mac. Perform a double layout if Ext.isMac. :s

Animal
7 Dec 2009, 1:19 AM
No, I think I see it. Element.getViewSize is just not quite right.

I will post an update for you here, but I can't test on the Mac.

Animal
7 Dec 2009, 1:39 AM
Try this override:



Ext.override(Ext.Element, {

getViewSize : function(){
var doc = document,
me = this,
d = me.dom,
extdom = Ext.lib.Dom,
isDoc = (d == doc || d == doc.body),
isBB, w, h;
if (isDoc) {
return { width: extdom.getViewWidth(), height: extdom.getViewHeight() };
}
isBB = me.isBorderBox();

// If there is no clientWidth, fall back to using offsetWidth, and if it's non-zero, subtract border if necessary
if (!(w = d.clientWidth)) {
w = d.offsetWidth;
if (w && !isBB) w -= this.getBorderWidth('lr');
}
// Account for padding
if (w) w -= me.getPadding('lr');

// If there is no clientHeight, fall back to using offsetHeight, and if it's non-zero, subtract border if necessary
if (!(h = d.clientHeight)) {
h = d.offsetHeight;
if (h && !isBB) h -= this.getBorderWidth('tb');
}
// Account for padding
if (h) h -= me.getPadding('tb');

return {
width : w,
height : h
};
}
});

mystix
7 Dec 2009, 2:13 AM
no dice. :(

i did notice however that commenting out layout:'fit' in the Ext.Window config results in the correct display.

Animal
7 Dec 2009, 2:14 AM
Sorry, I just edited. It was not setting the "h" var to return the view height.

mystix
7 Dec 2009, 2:17 AM
still no dice. :(

i could let you control my mac via VNC if you need a machine to test on.
just drop me a p.m. if you're up to it game.

Animal
7 Dec 2009, 2:37 AM
I doubt if I can do that from work.

mystix
7 Dec 2009, 2:40 AM
oh snap... forgot it's a monday...

Animal
7 Dec 2009, 2:47 AM
It's not a big deal to debug that step by step through Firebug.

What's I'd do is set a breakpoint at anchorLayout.onLayout and step through the whole lot, stepping into everything!

We have to see why the anchor layout is getting a too big view size, and making anchored child items just that little bit too wide.

But I see something funny in the CSS:

resources/css/structure/form.css has



.ext-gecko .x-window-body .x-form-item {
-moz-outline: none;
overflow: auto;
}


Why is it overflow: auto?

A form item is just a wrapper for the label+input structure. It should never scroll.

Try overriding that rule.

mystix
7 Dec 2009, 5:59 AM
sorry got a bit lazy there :">

overridding that rule with


.ext-gecko .x-window-body .x-form-item {overflow:hidden;}


gives this in Fx 3.5.5:

http://content.screencast.com/users/mystix/folders/Jing/media/1c50ed24-6113-4873-b7c7-edef62ee7a71/00000019.png

and no visible side-effects in the following browsers on OSX 10.6.2:

Safari 4.0.4
Opera 10.10
Chrome 4.0.249.27

jay@moduscreate.com
7 Dec 2009, 6:03 AM
Actually, I think the problem is the width calculation of the scrollbar btwn the two browsers.

This is me speaking without looking at the code though. Just a hunch.
http://pictures.mastermarf.com/blog/2009/090404-thinking-cat.jpg

Animal
7 Dec 2009, 6:08 AM
Which of those elements is overflow:auto to get that scrollbar?

When I run that example on FF here, and I look at the Window's "mc" element and bwrap and body, and then the FormPanel's element and bwrap and body, none of them are overflow:auto.

There must be a styling issue somewhere.

Animal
7 Dec 2009, 6:20 AM
Here's where to look:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/debuganchor.jpg

See the <div class="x-window-body"...>?

That and all the large containing box divs should have overflow:hidden set

Animal
7 Dec 2009, 6:25 AM
The sizing looks perfect though.

In the screenshot below, I have a screengrab of your posted image overlayed on top of my working versino in the browser. You see the sizes match exactly:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/sizing-is-correct.jpg

meroy
7 Dec 2009, 8:23 AM
Here's the screenshot. Notice overflow set to auto in highlighted text in image.

FF 3.5 under Leopard.

jay@moduscreate.com
7 Dec 2009, 8:26 AM
meroy, please use a service to provide screenshots. thumbnails are hard to read.

Animal
7 Dec 2009, 8:31 AM
OK, the window body has had its inline style set to overflow:auto

That should be trackable...

Set a break in Element.setStyle and conditionalize it to stop when this.hasClass('x-window-body')

Should be possible to find who's doing it.

It's not being done here is it?



afterRender : function(){
Ext.BoxComponent.superclass.afterRender.call(this);
if(this.resizeEl){
this.resizeEl = Ext.get(this.resizeEl);
}
if(this.positionEl){
this.positionEl = Ext.get(this.positionEl);
}
this.boxReady = true;
this.setAutoScroll(this.autoScroll); <-- should be false which should mean it is ''
this.setSize(this.width, this.height);
if(this.x || this.y){
this.setPosition(this.x, this.y);
}else if(this.pageX || this.pageY){
this.setPagePosition(this.pageX, this.pageY);
}
},



That calls



setAutoScroll : function(scroll){
if(this.rendered){
this.getContentTarget().setOverflow(scroll ? 'auto' : '');
}
this.autoScroll = scroll;
return this;
},


Which should set it to ''

meroy
7 Dec 2009, 8:31 AM
Thanks Jay. Can u explain how -- I've posted so many images in the consolidated pre 3.1 bugs thread. How are you guys integrating the large easy to read images? I didn't know until now of this. When you say service... What do you mean... Some external site I need to post or ... Thanks for any clarification on the matter.

Animal
7 Dec 2009, 8:32 AM
It's OK in this case, I squinted and saw that it's the window body.

FWIW, I use photobucket.com to post screenshots.

meroy
7 Dec 2009, 8:45 AM
In the afterRender function, this.setAutoScroll(this.autoScroll); <-- should be false which should mean it is ''

this.autoScroll is reported as undefined.

meroy
7 Dec 2009, 8:48 AM
Let me know what I can alert out here. scroll is undefined many times and then an object.



setAutoScroll : function(scroll){
if(this.rendered){
alert(scroll);
this.getContentTarget().setOverflow(scroll ? 'auto' : '');
}
this.autoScroll = scroll;
return this;
},

jay@moduscreate.com
7 Dec 2009, 8:48 AM
It's OK in this case, I squinted and saw that it's the window body.

FWIW, I use photobucket.com to post screenshots.

My apologies for the error.

Animal
7 Dec 2009, 8:49 AM
OK, and when you step through, that should pass '' into setOverflow which should leave it alone.

meroy
7 Dec 2009, 8:50 AM
I just posted and I got a message stating that it requires somebody to review.

Animal
7 Dec 2009, 8:51 AM
That's odd.

meroy
7 Dec 2009, 8:52 AM
In this function, scroll is an object at times. Therefore it causes to be set to auto.



setAutoScroll : function(scroll){
if(this.rendered){
alert(scroll);
this.getContentTarget().setOverflow(scroll ? 'auto' : '');
}
this.autoScroll = scroll;
return this;
}

meroy
7 Dec 2009, 8:53 AM
Just happened again. Requires a moderator to review.

meroy
7 Dec 2009, 8:54 AM
The scroll variable is sometimes an object when passed to the setAutoScroll function. Hope this goes through.

meroy
7 Dec 2009, 8:56 AM
Being that scroll is an object type, 'auto' is set inside the getAutoScroll function.

meroy
7 Dec 2009, 8:58 AM
Perhaps copying/pasting into code block -- the code with an alert statement is triggering something to have a moderator review the post.

Animal
7 Dec 2009, 9:13 AM
the scroll var is an object? when you step into the setAutoScroll method it is truthy???

Animal
7 Dec 2009, 9:13 AM
Don't debug with alerts. Step through code.

meroy
7 Dec 2009, 9:21 AM
Ok. Here are two pictures. I tried setting break points -- this is a first for me with JavaScript and debugger -- can this be done in the external ext-all-debug file?

Jay can you help here?

In the meantime here are two images. The alert statement is inside the setAutoScroll --> if statement.

meroy
7 Dec 2009, 9:21 AM
The first image above is after 8 clicks. The 2nd after 10 clicks.

Animal
7 Dec 2009, 9:23 AM
What if you set Ext.Container.prototype.bufferResize = false at the top of the js file?

meroy
7 Dec 2009, 9:27 AM
What if you set Ext.Container.prototype.bufferResize = false at the top of the js file?

Tried your suggestion and the same issue. Set this in anchoring.js at the top of the file. I emptied out the cache to be sure as well.

Animal
7 Dec 2009, 10:47 AM
Someone with a Mac needs to step right through the code.

meroy
7 Dec 2009, 10:54 AM
I would like to suggest this as a critical bug, to be fixed before 3.1's deployment.

Please Jay, follow up and work with Animal to step through the code. If not you, please fine someone with a Mac. I'm not able to do this.

jay@moduscreate.com
7 Dec 2009, 10:59 AM
Nige, Meroy,

I will work on it tonight after my boys go to sleep (~9PM Eastern).

I cannot do anything until then.

BlueCamel
7 Dec 2009, 11:50 AM
As I need to learn how to step in Firebug, and I have a Mac, at what point should one start stepping?

Animal
7 Dec 2009, 12:04 PM
It's going to be a long job if you are not familiar with the layout code!

I'd start by breaking at AnchorLayout.onLayout, and step through.

You can poke the CSS through Firebug to visually make the Window visible so that you can see it, and use Firebug's HTML tab, and the "Layout" subtab on the right to examine box size that it is looking at and manipulating.

jay@moduscreate.com
7 Dec 2009, 12:48 PM
getfirebug.com , start there.

BlueCamel
7 Dec 2009, 1:01 PM
It's going to be a long job if you are not familiar with the layout code!

I'd start by breaking at AnchorLayout.onLayout, and step through.

You can poke the CSS through Firebug to visually make the Window visible so that you can see it, and use Firebug's HTML tab, and the "Layout" subtab on the right to examine box size that it is looking at and manipulating.

I've never been accused of setting the bar low ;)

You're right, I'm not deeply familiar with extjs internals or the layout code. This seems like a good way to learn and knowing at least roughly where to start from saves some frustration.

I would still count on Jay coming up with the solution faster than I will, even with my 4 hour head start!

jay@moduscreate.com
7 Dec 2009, 1:03 PM
OK, i've narrowed the problem down (with Nige's guidance from this thread (thanks dude!)) to:

The 4px margin-bottom was causing the overflow and can be found in the Component's parent's parent node.

Update: the CSS is not needed, see the patch below in red.
CSS override:


.ext-gecko .x-window-body .x-form-item {
-moz-outline: none;
overflow: hidden;
}






Ext.override(Ext.layout.AnchorLayout, {
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, // Iterator
c, // Component
a, // Anchor Spec
cw, // Container Width
ch, // Container Height
el,
vs;
for(i = 0; i < len; i++){
c = cs[i];
el = c.getPositionEl();
if(c.anchor){
a = c.anchorSpec;
if(!a){ // cache all anchor values
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) - el.getMargins('lr'), c) : undefined;
ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h) - el.getMargins('tb'), c) : undefined;

if (Ext.isGecko && i + 1 === len ) {
var parentEl = Ext.get(c.el.dom.parentNode.parentNode);
parentEl.setStyle({
'margin-bottom' : '0px'
});

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

jay@moduscreate.com
7 Dec 2009, 1:06 PM
I've never been accused of setting the bar low ;)

You're right, I'm not deeply familiar with extjs internals or the layout code. This seems like a good way to learn and knowing at least roughly where to start from saves some frustration.

I would still count on Jay coming up with the solution faster than I will, even with my 4 hour head start!

:) I found some time during a meeting to look at this today. :>

BlueCamel
7 Dec 2009, 1:14 PM
:) I found some time during a meeting to look at this today. :>

ha!

aconran
7 Dec 2009, 1:21 PM
There was a Firefox2 OS X workaround in place that did not have checks for Firefox2 only. (It was also executing against Firefox 3.0 & Firefox 3.5.

The workaround definitely needs to be ran for Firefox 2.x.

I'm not sure if the workaround needs to be ran for Firefox 3.0.x

The workaround cannot be ran for Firefox 3.5.x. (This is what triggers the issue.)

For more details checkout Window.js and the Ext.isMac checks.

meroy
7 Dec 2009, 1:52 PM
Just verified that this has been resolved -- tested against SVN 5748. Updated the consolidated pre 3.1 bugs thread as being fixed.

Jamie Avins
7 Dec 2009, 1:59 PM
We just need to verify FF 2.x and 3.0 on OSX

meroy
7 Dec 2009, 2:37 PM
I downloaded and tested FF 3.0.15 -- Good.

However, I'm not able to find FF 2.x for downloading.

Animal
7 Dec 2009, 2:52 PM
OK, well that's good that someone knew there had to be this workaround. I think it needs a large comment block in the code!

But also, that CSS rule I mentioned earlier:

resources/css/structure/form.css:



.ext-gecko .x-window-body .x-form-item {
-moz-outline: none;
overflow: auto;
}


I think the overflow:auto is not wanted inside an x-form-item.

Or is that a definite workaround for something else? CSS needs commenting too!

jay@moduscreate.com
7 Dec 2009, 3:08 PM
Thanks for all of your work guys :)

aw1zard2
7 Dec 2009, 3:24 PM
Not sure if this is related but under firefox 3.x I used to get those scrollbars when validation would hit when I had my field auto stretch in align: stretch I fixed it by moving them to the left away from the right side a little more. Would this have been the same cause for this?

I was thinking it was something I was doing. IE8 and Chrome showed them fine it was just firefox 3.x on winXP.

:D