An Overview of the new ExtJS 4 Javascript framework

Having worked with ExtJS 3.1, it’s a real pleasure to see them keep pushing forward today with the release of version 4. ExtJS is a great framework for doing specific types of UI, and it takes a minute to wrap your mind around the mainly class system configuration programming style required to get things rolling but once you do, you realize the genius and flexibility behind. So kudos to the Sencha team on this achievement. I’ve looked at the press release and notes and  there is some improvement all around. The’ve added a lot more documentation than with previous releases. The class system has been extended to support dynamic loading, mixins and live dependency calculation. It is also completely sandboxed which for example allows you to run multiple versions of ExtJS within the same page. A major change, not that major if you have been following their work with the Sencha Touch mobile development framework, is the introduction of an MVC application architecture which should help streamline application development and faciliate transitions between team members. Welcomed as well is the addition of SDK tools with support for Javascript code optimization.

Topping the new feature list is the introduction of whole new plugin-free charting package (which Sench uses as an example of the sandboxing mentioned earlier by providing a chart written in ExtJS4 running fine within an ExtJS3 desktop) built on web technologies (SVg and VML). Also, the Grid, which i have used extensively in ExtJS3 is getting a makeover and has been modularized and is now extensible. Some of the extensions used in ExtJS3 and previous versions to enable for example column locking or cell editing are now obsolete as those features are available out of the box. Even better yet, the markup used to render the grid, which turned out to be quite a challenge for me as it was not 508 compatible, is now generated on demand which makes the need for pagination unecessary. TreeGrid has been integrated within the core code and supports all of the normal Grid functionality.

The Data package has been revamped and supports HTML5 localStorage and introduces the new Model class which allows you to accurately model your data layer. I’ve somehow played with its Touch counterpart, and will probably expand on it later, but it consists mainly of Fields, which represent the data fields, a Proxy, which is responsible for loading and saving data from a source, Associations which defines how Models relate to each other, and Validations for validating fields before a save. This very much reminds me of the CakePHP MVC architecture, which itself is based on the RoR model.

I would mention in passing improved support for theming, a new FocusManager class which makes it easier to enable keyboard navigation in your application, which should really help with with accessibility and 508 compliance.

Overall, I think that Sencha is maintaining a good direction with their product and as soon as I find a good project whose requirements fit the features offered by the framework,  it will be on top of my list of possibilities. In the mean time as I am working on some mobile development with Sencha Touch, it will allow be to familiarize myself better with all the new features.

Check out the press release for yourself: http://www.sencha.com/blog/ext-js-4-final/

Advertisements

4 thoughts on “An Overview of the new ExtJS 4 Javascript framework

    1. Not at this point, but as with everything ExtJS, I’d be surprised if it would not take some level of customization to make them compliant. Our biggest violations were with the Grids, and I am looking into the new rendering system to see if there is improvement or a way to make it compliant. A positive in this effect is that with ExtJS 4 being able to run alongside ExtJS 2 within the same page, it’ll facilitate upgrading the offending components without breaking the rest of the code.

  1. Pingback: JavaPins

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s