rendering differences between IE and FireFox

[pouli]

Hello,

I am having a a rendering problem between FireFox and IE.

I have a UI that builds itself dynamically after loading.
For example:

var myPanel = new Ext.form.FormPanel({
...

for( a = 0; a != max; a++ )
{
var fieldSet = new Ext.form.FieldSet(
{
id: a,
labelWidth: 25
});

var newTextArea = new Ext.form.TextArea({
....
fieldSet.add(newTextArea);
myPanel.add(fieldSet);
} // end of for

....

I have a dataStore as well that at the end of the load event I have something like this:
myPanel.doLayout();

My problem starts from the fact that the FireFox shows to the user every single textarea that EXT is adding at myPanel.
This produces something like a bad animation where all the UI is moving until all of the textfields being added to myPanel.

On the other hand IE first adds everything and at the end it shows the panel to the user.

Why this is happening and how could I avoid this ?

Thank you

[Condor]

This is caused be the rather strange <input> rendering implementation of Firefox.

The only way to get around it is to hide the form (with hideMode:'offsets') until rendering is complete.

[pouli]

Hello Condor,

I tried this

var myPanel = new Ext.form.FormPanel({
layout: 'table',
wiatMsgTarget: true,
layoutConfig : {
columns : 3
},
closable : false,
resizable : true,
autoScroll : true,
renderTo : 'panel-ct',
bbar : myBottomToolbar,
tbar : myTopToolbar,
hideMode : 'offsets'
});


but nothing changed.
I tried also the myPanel.hidden = true and false when it finishes but with no success.
How you change the hideMode after the object has been configured ? I haven't seen any public property or method for this.

[Condor]

hideMode:'offsets',hidden:true

and

myPanel.show() in the afterlayout event.

[pouli]

I have made it working thanks to you.
But the afterLayout event contained an undefined myPanel.
Instead of placing the myPanel.show() there I placed it at the load event of the store.

This is the place where I used to do myPanel.doLayout();

Why the myPanel is undefined at the afterlayout event?

[Condor]

The load event will also work, but I don't understand: How can your panel be undefined in it's own afterlayout event!

[pouli]

OOoops,

now the IE does not work! it is a complete disaster there now since not all of the textareas are visible.
This is a bigger problem in comparison with my original.

[pouli]

yes this is where I placed it but I used myPanel (private variable) not this.
I suppose that the this will not be undefined.

[pouli]

Ok here is something else

this works with FireFox but fails with IE since it seems that myPanel must not be hidden when the doLayout is called, otherwise the rendering is really problematic (IE 6 unfortunately quite old)
myPanel.doLayout();
myPanel.show();

If I do this:
myPanel.doLayout();
myPanel.show();
myPanel.doLayout();

The layout works for IE as well but certain labels and bottom bar (not top) of the panel are missing.

[pouli]

This does not look very nice but it works
myPanel.doLayout();
myPanel.show();
myPanel.doLayout(); // This part works for both FireFox and IE

myPanel.hideMode = 'display';
myPanel.show(); // This is to correct the IE missing labels and bars

This works under IE 6, 7, 8, Firefox, Google chrome and opera.

Condor do I do something wrong ?
Why this is happening ?