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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
Ext.define('Level7.view.user.GridController', { extend: 'Ext.app.ViewController', alias: 'controller.user-grid', edit: function (record) { var win = new Ext.create('Level7.view.user.EditWindow', { viewModel: { data: { user: record } } }); win.show(); }, // new user click action onAddClick: function (view, rowIdx, colIdx, item, e, rec) { var rec = Ext.create('Level7.model.User'); this.edit(rec); }, // edit click action onEditClick: function (view, rowIdx, colIdx, item, e, rec) { this.edit(rec); } }); |
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.
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:
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:
|
1 2 3 4 |
validators: { firstName: { type: 'length', min: 3 }, email: 'email' } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// this enabled model validation for field that are bind modelValidation: true, items: [{ xtype: 'textfield', bind: '{user.firstName}' },{ xtype: 'textfield', bind: '{user.lastName}' },{ xtype: 'textfield', bind: '{user.email}' }, |
or by binding validation to each property:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
items: [{ xtype: 'textfield', bind: '{user.firstName}' },{ xtype: 'textfield', bind: '{user.lastName}' },{ xtype: 'textfield', bind: { value: '{user.email}', // binding validation to given field validation: '{user.validation.email} } }, |
It is recommended to use Sencha CMD in process of building ExtJS application.
At the beginning we can generate new app skeleton with command:
|
1 |
$ sencha generate app |
This will generate file structure as in the picture below:
After that we can start generating controllers, models and view:
|
1 2 3 4 5 |
$ sencha generate controller $ sencha generate model $ sencha generate view |
They are really usefull and can save a lot of time. E.g:
|
1 |
$ sencha generate view user.Grid |
will generate file structure and some some code that we are going to change:
|
1 2 3 4 5 |
view/ user/ Grid.js GridController.js GridModel.js |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
Ext.define('Level7.view.user.GridController', { extend : 'Ext.app.ViewController', routes : { 'add' : 'onAdd' }, onAdd : function() { //... } }); |
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.
Notice:
Using routing component in ExtJS5 apps is not required but is really easy and powerful.
Handling forms have never been so easy – with configured Models, ViewControllers and ViewModels we can handle form submission e.g. in this way:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
buttons: [ { text: 'Save', // this is now handled by ViewController handler: 'onSaveClick' }, { text: 'Cancel', listeners: { click: 'closeView' } } ] |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
onSaveClick: function() { var form = this.lookupReference('form'), rec; if (form.isValid()) { // get user data from ViewModel rec = this.getViewModel().getData().user; Ext.Msg.wait('Saving', 'Saving user...'); rec.save({ scope: this, success: this.onSuccess, failure: this.onFailure }); } }, |
We can create association for our models (now also with support for Many-to-Many relations):
|
1 2 3 4 5 6 7 8 |
Ext.define('Level7.model.User', { fields: [ ... { name: 'productId', reference: 'Product' } ... ], manyToMany: 'Customer' }); |
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.
Your email address will not be published. Required fields are marked *
VoIPstudio brings award-winning features, premium quality voice and intuitive mobile and desktop performance – at affordable prices to Spanish SoHo, SME and enterprise users Palma de Mallorca, Spain, October 1st, 2018 – VoIPstudio is excited to announce the launch of … Continue reading VoIPstudio launches in Spain
Read moreExpanding the VoIP offer with SIP Trunking Creating a long-term enterprise communication strategy involves a lot of decisions and choices, most of them binary in nature. Should you upgrade to VoIP or stick with your existing analog solution? Purchase new … Continue reading Level 7 Systems launches its new flagship product, GoTrunk.
Read moreOracle Sales Cloud Customers Can Use VoIPstudio CTI Connector To Improve Efficiencies News Facts VoIPstudio, a specialist in high quality VoIP and Session Initial Protocol (SIP) communications and Gold level member of Oracle PartnerNetwork (OPN), today announced that its CTI … Continue reading VoIPstudio CTI Connector Now Available in the Oracle Cloud Marketplace
Read more
David Bush
June 23, 2016 17:37
MVVM would be great if it actually worked more than one level deep. It is slightly better than their MVC architecture (which wasn’t really MVC) and like most things from Sencha, they’ve only half implemented MVVM and left the rest to our imagination.