ExtJS + DWR


I have tested two of my web 2.0 applications, that use ExtJS and DWR extensively, under Google’s new web browser Chrome. Both application use personalized menu and have many complex screens split into tab panels which in some cases nest other tab panels. I was impressed by faster load time and feel of the applications - much faster then Firefox, Safari and Internet Explorer! Application shortcut feature is pretty cool as well.

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?

MiracleCommerce shopping cart software provides the tool and the frame work that allow web developers and web designers to build fully functional e-commerce websites without reinventing the wheel. Some of our very successful customers include Family Vision Center (www.famvision.com) and New York City Message Bears (www.nycmb.com). MiracleCommerce allows non-profit organizations to collect donations online, without requiring any upfront investment in server or CMS software. MiracleCommerce travel and event management solutions allow event managers to create event website that allows customers to buy travel packages (National Black Arts Festival - http://nbaf.theotgroup.com/store/).

I am currently in the process of upgrading MiracleCommerce to Web 2.0 technology (Key components - ExtJS (www.extjs.com), DWR (www.getahead.org/dwr)). This is a significant technology upgrade that will allow users to manage web stores, much easier then before. Some of the much awaited features include significantly improved search and filtering of data. I don’t want to give away the secret yet however, if you are interested, please see the pre-release screenshots.

MiracleCommerce 2.0 - Pre-Release Order Menu

MiracleCommerce 2.0 - Pre-Release Customers Menu

MiracleCommerce 2.0 - Pre-Release Order Data Grid

MiracleCommerce 2.0 - Pre-Release Customer Data Grid