PDA

View Full Version : [FIXED-372][3.0r5700] FieldLabeler/vbox layout form broken



meroy
2 Dec 2009, 7:35 PM
More test case for possibly the same problem with FF 3.5 under OS X.

examples/form/vbox-form.html

Notice how the text area is not sized to the right correctly. Resizing the form window corrects it. Showing before and after resizing.

jay@moduscreate.com
3 Dec 2009, 4:55 AM
Meroy, moved to a different bug thread because the vbox layout inherits from BoxLayout, not AnchorLayout.

@ExtJS team, here is a video demonstration of this occurring:
http://tdg-i.com/img/screencasts/2009-12-03_0752.swf

Animal
3 Dec 2009, 5:55 AM
Step carefully through this area:



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

var cs = this.getItems(ct), cm, cw, margin,
size = this.getTargetSize(target),
w = size.width - target.getPadding('lr') - this.scrollOffset,
h = size.height - target.getPadding('tb'),


You can poke the Window's inline style with Firebug to make it visible at 0,0, and then see what it thinks the "target size" is. It looks like it's leaving "scroll width" pixels!

I don't have a Mac, otherwise I could look at it.

jay@moduscreate.com
3 Dec 2009, 6:04 AM
Thanks animal.

Just an FYI, I have confirmed this occurs with build 5700

evant
3 Dec 2009, 6:06 AM
I don't have a Mac to test on either.

Perhaps the margin calculations are getting messed up.

jay@moduscreate.com
3 Dec 2009, 6:07 AM
yes, the strange thing is that a resize of the Window fixes it. :-\

Animal
3 Dec 2009, 6:11 AM
Laying out is only done once now!

meroy
3 Dec 2009, 8:26 AM
This example is failing under IE6. Running against r5702. Line 6657, Error: Invalid argument.



/**
* Quick set left and top adding default units
* @param {String} left The left CSS property value
* @param {String} top The top CSS property value
* @return {Ext.Element} this
*/
setLeftTop : function(left, top){
var me = this,
style = me.dom.style;
style.left = me.addUnits(left);
style.top = me.addUnits(top);
return me;
},

Animal
3 Dec 2009, 10:00 AM
That's the FieldLabeler setting the margins property to a string "0 0 0 4" instead of



{
top: 0,
right: 0,
bottom: 4,
left: 0
}


But there's still something funny on IE even with that fixed...

meroy
3 Dec 2009, 11:38 PM
The vbox-form example is badly broken under Safari 4.0.4 (Mac OS X 10.5). Just got home and pulled down the latest to test under Leopard.

Edit: Also looks the same under FF 3.5.5

jay@moduscreate.com
4 Dec 2009, 4:10 AM
The vbox-form example is badly broken under Safari 4.0.4 (Mac OS X 10.5). Just got home and pulled down the latest to test under Leopard.

Edit: Also looks the same under FF 3.5.5

I'm confirming that it does exactly like this under OS X in Fx 3.5.5

Animal
4 Dec 2009, 4:19 AM
Who has a mac and is prepared to step through layout code?

I'd do it if I had one.

It should not be that hard to create a simple Ext.Container of layout vbox with one Ext.BoxComponent in it, and step all the way through rendering and layouting.

Animal
4 Dec 2009, 4:26 AM
Like does this



Ext.getBody().update('');
new Ext.Container({
width: 100,
height: 100,
style: 'border:1px solid black',
layout:{
type: 'vbox',
align: 'stretch'
},
items: {
xtype: 'box',
style: 'border:1px solid red',
margins: '5 5 5 5',
flex: 1
},
renderTo: document.body
});


produce this?

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

jay@moduscreate.com
4 Dec 2009, 5:05 AM
Like does this



Ext.getBody().update('');
new Ext.Container({
width: 100,
height: 100,
style: 'border:1px solid black',
layout:{
type: 'vbox',
align: 'stretch'
},
items: {
xtype: 'box',
style: 'border:1px solid red',
margins: '5 5 5 5',
flex: 1
},
renderTo: document.body
});


produce this?

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


Yes, perfectly.

jay@moduscreate.com
4 Dec 2009, 5:06 AM
Who has a mac and is prepared to step through layout code?

I'd do it if I had one.

It should not be that hard to create a simple Ext.Container of layout vbox with one Ext.BoxComponent in it, and step all the way through rendering and layouting.

I am prepared, but do not have the time. My commitment to getting this book completed this year has me pinned.

Animal
4 Dec 2009, 5:12 AM
What about this in examples/<anywhere>



<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

new Ext.Container({
width: 100,
height: 150,
style: 'position:absolute;border:1px solid black',
x: 10,
y: 10,
layout:{
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'box',
style: 'border:1px solid red',
margins: '5 5 5 5',
height: 20
},{
xtype: 'box',
style: 'border:1px solid green',
margins: '5 5 5 5',
height: 20
}, {
xtype: 'box',
style: 'border:1px solid blue',
margins: '5 5 5 5',
flex: 1
}],
renderTo: document.body
});
});
</script>
</head>
<body>
</html>


Should give

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

jay@moduscreate.com
4 Dec 2009, 5:38 AM
It renders exactly.

jay@moduscreate.com
4 Dec 2009, 5:39 AM
I tried with panels and windows (with textfields), and it works perfectly.

jay@moduscreate.com
4 Dec 2009, 5:43 AM
I've narrowed the problem down to at least the scroller width calculations of the anchor layout. vbox seems to work.

Nige, i think the vbox example is just a plugin related issue.

jay@moduscreate.com
4 Dec 2009, 5:52 AM
Ok, strange:

When i disable the plugin usage, everything kind of works.

It seems that the vbox layout *thinks* the form's size is much less than it is. A simple doLayout call fixes the issue (naturally).

I think this is a timing issue of sort.

Steffen Hiller
4 Dec 2009, 7:39 AM
I could reproduce the bug with trunk@5700 with FF 3.5.5 on Mac OS, too.

But, I didn't investigate on that bug further, since r5701 introduces a worse bug, which still exists in the latest r5706!

See vbox-form example screenshot in attachments.

Going to file an extra bug thread ...

(There's another bug with /examples/form/anchoring.html which I rather file in a separate thread since it exists in r5700 and r5701.)

Steffen Hiller
4 Dec 2009, 7:48 AM
What's going on,
Animal, I got an email message for this thread for your message beginning with "What if you add this override?" but can't see it on the forum's thread page? Known forum bug or did you delete it again?

Anyway, your override doesn't change a thing for me.
(I made sure it's loaded, it calls onLayout two times when loading the paging.)

Steffen Hiller
4 Dec 2009, 7:55 AM
Tested on FF 3.5.5 Mac OS 10.5.
Actual result: See screenshot.
Expected result: See version r5700, all form fields should be visible.

jay@moduscreate.com
4 Dec 2009, 7:56 AM
It was most likely deleted :)

jay@moduscreate.com
4 Dec 2009, 7:58 AM
Tested on FF 3.5.5 Mac OS 10.5.
Actual result: See screenshot.
Expected result: See version r5700, all form fields should be visible.

Merged this thread since it's a dupe.

Animal
4 Dec 2009, 8:08 AM
I deleted my post because I realized it was full of rubbish!

Steffen Hiller
4 Dec 2009, 8:27 AM
Hmm, still, this forum software always has been a bit mysterious to be.

How annoying that I have to open every comment in the browser to get further email notifications, or is there any option for it.
The last email notification I got was Jay's "It was most likely deleted".
Sorry for this off-topic question.

Jay, why did you merge that other bug into this one??
Seems to be unrelated to me.

Jamie Avins
4 Dec 2009, 11:12 AM
Another example.

/examples/layout-browser/layout-browser.html

If you choose vbox, the layout is incorrect in IE.

I finally hunted this down. The issue is that we do height calculations before the width calculations are completed and applied. Those width calculations often affect what the height is going to be. For this example, the header for the panels is being calculated with a width of 0, this means the span they are in will wrap and so the height is calculated as 36px. After we set the actual width, there is no longer a wrap and the height is calculated as 23px...

This is why when you do anything that lays out the panel again, it has a good width to work with and it fits properly.

jay@moduscreate.com
4 Dec 2009, 12:42 PM
Jay, why did you merge that other bug into this one??
Seems to be unrelated to me.

Steffen,

see the following post in this thread :)

http://www.extjs.com/forum/showthread.php?p=415214#post415214

Steffen Hiller
4 Dec 2009, 1:11 PM
Steffen,

see the following post in this thread :)

http://www.extjs.com/forum/showthread.php?p=415214#post415214

Oops, sorry, didn't notice that "thread changer" post. :">

meroy
4 Dec 2009, 1:58 PM
Tried 5709 and ext-5709/examples/form/vbox-form.html fails under IE 6 with an error on page. Will change to use the debug.js and report back on the error and code.

meroy
4 Dec 2009, 2:06 PM
Under IE 6, the error message is Invalid argument line 5918.



setWidth : function(width, animate){
var me = this;
width = me.adjustWidth(width);
!animate || !me.anim ?
me.dom.style.width = me.addUnits(width) :
me.anim({width : {to : width}}, me.preanim(arguments, 1));
return me;
},

Animal
4 Dec 2009, 2:17 PM
That's a bug in the FieldLabeler plugin which sets the margins to "0 0 4 0"

But if you make it set it to an object format {top:0, right: 0, bottom: 4, left: 0} then it completely breaks the layout!

meroy
4 Dec 2009, 3:12 PM
For tests against Safari, the same is seen under Windows -- obtain Safari for Windows.

Tested with release 5710.

meroy
4 Dec 2009, 3:15 PM
Recap: Test fails to load fully under IE 6. Height issue under Safari 4 and FF 3.5.

Jamie Avins
4 Dec 2009, 4:26 PM
That's a bug in the FieldLabeler plugin which sets the margins to "0 0 4 0"

But if you make it set it to an object format {top:0, right: 0, bottom: 4, left: 0} then it completely breaks the layout!

I think there's more issues with the FieldLabeler than just the margin format. I'll get this a bug number.

Animal
5 Dec 2009, 5:35 AM
I have committed a fix which addresses the margin format.

I have also committed a fix for IE's rendering issue, but it's ugly. I could not figure out what was going on. The .x-form-element div should stack up on the same line as the label because the label is float:left, and the .x-form-element has padding which the label appears in.

This works fine on all other browsers. on IE, the .x-form-element was wrapping into a new line. I have fixed it for now with an IE-specific hack, but it could do with more attention.

meroy
5 Dec 2009, 7:37 AM
The vbox-form example is working under IE 6 with Ext release 5716.

meroy
5 Dec 2009, 7:39 AM
The vbox-form example also works with Safari4 and FF35 under Windows.

Animal
5 Dec 2009, 7:45 AM
OK, there's still the problems with

examples/layout/vbox.html
examples/layout/hbox.html

Which I posted fixes for on the other thread.

Jamie Avins
5 Dec 2009, 10:27 AM
Fixed in svn 5716. Thanks Nige.

meroy
5 Dec 2009, 10:29 PM
Kind bump -- just one remaining issue with this example. See the 2 images for comparison on the first post of this thread. It's with FF. The fields and text area is not sized correctly on the right side.

https://www.extjs.com/forum/showthread.php?p=414728#post414728

meroy
5 Dec 2009, 10:31 PM
A new observation with FF is that if I make the form smaller, the extra margin persists. However, if I make the form bigger, the margin is adjusted correctly. Interesting.

examples/form/vbox-form.html

meroy
6 Dec 2009, 1:01 PM
More test case for possibly the same problem with FF 3.5 under OS X.

examples/form/vbox-form.html

Notice how the text area is not sized to the right correctly. Resizing the form window corrects it. Showing before and after resizing.

This is only failing with FF under Leopard. Look at post #1 for images. This example is working with FF under Windows as well as Safari (Windows/Leopard) and IE 6/7.

jay@moduscreate.com
6 Dec 2009, 1:32 PM
confirmed resolved. Thanks :)

meroy
6 Dec 2009, 5:19 PM
This example is now working consistently with FF/Safari on Leopard and FF/Safari/IE7 on Windows.