Is ExtJS5 really so awesome?

Posted on: 2014-09-08 | Categories: JavaScript

A couple of weeks ago Sencha has introduced new version of their flagship product: ExtJS 5. After “slow and heavy” ExtJS 4 this version is expected to be the best ExtJS release ever. In next few chapters i will try to explain you why.

MVVM Architecture

As ExtJS 4 introduced MVC (Model-View-Controller) software pattern as best practice for building enterprise web application with JavaScript, ExtJS 5 takes this concept one step further with MVVM (Model-View-ViewModel) architectural pattern. Although MVC and MVVM are very similar, MVVM takes the best of MVC (separation of functional responsibilities) and the main difference between MVC and MVVM is that the ViewModel manages the changes between the Model and View, providing also the mechanism of data binding (in typically MVC apps developer needs to take care of data binding themselves and this is where two-way data binding comes into play).

Notice: Two-way data binding means that each change to model will automatically update related view and each change inside to view layer (e.g. in form) will be mapped to the model.



With new ExtJS5 we don’t even have to use the standard concept of controllers because framework introduced ViewControllers instead. ViewControllers are related to given view and are listening for events from that views. All view logic related to given view should be implemented in their ViewController.

Sample code of  ViewController is shown below:

Notice: ExtJS 5 provides full backwards compatibility for MVC and supports both paradigms so that developer can choose if they want to automate the connection between  View and  Model (ViewControllers and ViewModels with data binding) or use simple MVC.


The primary role of ViewModel is to provide data for its view and as ViewController is managed by view that references to.

Two-Way Data Binding

The main goal of MVVM concept is to reduce the amount of application logic that developer need to write through two-way data binding.  This is one of the most exciting feature of popular AngularJS JavaScript framework. New version of ExtJS provides support for this mechanism out of the box.


Data-binding is the process of automatic synchronization of data between the Model and View components.  Any data change made in the view is automatically send back, automatically updating any components that is configured through the “bind” option. No registration of any event handlers is needed. This is illustrated on the picture:

Model validation binding

As model can have their fields validators and can perform some validation of provided data, this can also be connected to form – as far as we are using model binging. This can be achieved in two ways:

or by binding validation to each property:

Sencha CMD – generators

It is recommended to use Sencha CMD in process of building ExtJS application.

At the beginning we can generate new app skeleton with command:

This will generate file structure as in the picture below:

After that we can start generating controllers, models and view:

They are really usefull and can save a lot of time. E.g:

will generate file structure and some some code that we are going to change:

More about sencha MCD can be found here.


With routing component we can link given state of our app – this is achieved by changing URI hash. Routing allows
developers to implement “deep linking” in their apps. As simple example:

This route will listen to the #add hash and will execute proper method – in this case onAdd method that will create e.g. add new user form.

Using routing component in ExtJS5 apps is not required but is really easy and powerful.

Hadling form submission

Handling forms have never been so easy – with configured Models, ViewControllers and ViewModels we can handle form submission e.g. in this way:

Model associations

We can create association for our models (now also with support for Many-to-Many relations):

ExtJS5 and more great stuff…

Full list of features introduced in ExtJS 5 can be found in official documentation.


New ExtJS5 is really awesome framework and introduces many great features, defining a consistent architecture for organized code. With MVVM concept writing single page app is easier and more powerful.
We are going to give ExtJS5 a shot with our upcoming new project.