Sunday, March 02, 2008

Javascripting with ExtJS

Back in the early days of my work in Java I adopted the typical Java developer's bias against Javascript. Whenever someone would mention Javascript I would cringe. Afterall, why would I choose Javascript when I had Java? But I always felt I was missing something.

So last year I decided to do something about it and integrated the Prototype Javascript library into my Struts application.  I quickly learned that I didn't hate Javascript but hated the inconsistencies in the browser DOMs and learned to properly direct my hate  (Internet Explorer, I'm looking at you!).  

Despite a couple hiccups, that project was really quite enlightening and I went on to expand my knowledge with a great series of videos at the YUI Theatre. Douglas Crockford has three series of videos that I highly recommend to anyone wanting to learn JS. He goes over the history of Javascript and plainly spells out Javascript's problems and strengths (e.g., it supports functions as first class objects with support for closure, hashes are all powerful, prototypical inheritance is different than classical inheritance but is quite workable, and be careful of the default global namespace).

So now armed with a proper understanding of the language, I started a building new web application in January and realized that there were requirement that would be best served by AJAX and some nice browser widgets.  In enters ExtJS. After a couple weeks writing a spike through Struts and ExtJS (still using Prototype underneath), I made the choice to adopt ExtJS as a the library for my application's user interface.  Two months later, I'm more than satisfied with the choice.  So are my users.  

In the end, I've shed a bias I really shouldn't have been harbouring, I embraced a "new" language and added the ability to better server my users.  I still won't choose Javascript for a lot of things but I'm much happier knowing that I can properly apply it as part of an overall solution.

2 comments:

Elangesk said...

Hi Cocoa,

I refered your Javascripting with ExtJS topic in the Blog. i want a sample application to bind ExtJs UI with Sturs 2.0.11 framework and also want information about handle Struts Action on ExtJs UIs.

This is urgent Requirement to me... I hope you will reply in soon...

Thanks in Advance

Regards,
K.Elanges
elangesk@gmail.com

sundog said...

Hi Elanges,

I'm not prepared to put together an entire sample application for you but I'm certainly willing to give you some idea about how I put my application together. I used a DispatchAction subclass. Each method responds to a HTTP request. Some of the methods behave like your typical Struts actions, e.g. they fetch data from database, put it in an ActionForm subclass and then forward to a JSP to generate HTML. It's in these JSPs where I setup DIV elements and include custom written JS files to create the ExtJS elements in my page. Other methods in my DispatchAction subclass are intended to respond to the AJAX requests from the ExtJS library. Typically they may fetch data from the database, convert it into XML (using dom4j) write the XML to the response and then finally return null to avoid forwarding to a JSP. It's this XML that I use from the ExtJS components in my page to populate grids, comboboxes etc. To post data, I typically get data out of editable grid component's store and use an AJAX call to post the data to my Struts DispatchAction. I go to the trouble of forming the data the way a normal Struts app posts its data. That way my ActionForm gets populated automatically, and my Struts DispatchAction method can just work with the data. I suggest getting familiar with Stores, XMLReaders, EditorGridPanels, etc. ExtJS is very well written, it's consistent and the documentation and examples are quite thorough. Good luck.

Darcy.