I was wondering if instead of using JavaScriptt forms that create input elements dynamically, what if some or all of the form fields were created on the server at the time of page load - you know, the good old way? That way, there will be less overhead of field creation on the client?

Now, I do realize that the input field is just one of the many elements that are needed to render a field inExtJS form, but what the heck; Result surprised me.

In a simple test like this:

var form = new Ext.form.Form({labelWidth: 125});
for(var i=0; i< 1000; i++){
form.add(
new Ext.form.TextField({
fieldLabel: i + ': First Name',
name: 'first' + i,
width:175,
allowBlank:false
//, applyTo: 'first' + i
})
);
}
form.render('autoform');

Internet Explorer 6 on Windows XP, beats Firefox 1.5 on XP hands down; I wonder why though. However performance of both browsers decrease if input fields are created in HTML and “applyTo” option is used for field rendering.

Any clue? I would imagine, some time is spent by browser rendering the static input fields. Perhaps moving elements in a heavily populated DOM is expensive?

For those who may have worked on large-scale ExtJS v1.1 apps, this application has:
* 1 Main data grid, 6 - 8 data stores;
*1 Maindialog comprising of 5 grids, each with a toolbar and a few buttons that change state depending on the state of data
* 1 Secondary dialog that is re-used to render child forms (5)

Application works great in Firefox, even with Firebug enabled, however IE6 on XP leaves much to be desired. One of the main requirement is for data grids to not scroll; only main dialog window should scroll. This is being achieved by calculating the needed height and updating height of grid (s) as needed. This brings Internet Explorer to its knees and very often freezes the UI for some time. Any advice on making IE6 co-operate?