What’s new in Ext JS 5?
Ext JS 5 provides a lot of API changes, architectural options and new features. This version also narrows down the gap with Sencha Touch, the mobile JavaScript library. Some of the new features in Ext JS 5 that we’ll see in the series of articles are:
- Responsive plugins
- Data binding
- View Controllers
These three features were long overdue in Ext JS. A couple of features are already present in a number of JS libraries.
Responsive Plugins
Responsive UI has become a norm in the applications we build today. We want our applications to automatically respond to various devices like tablets, smart phones. Sencha Touch has the profile that is used to handle the responsive UI. But this facility has been introduced in Ext JS 5 in the form of a responsive plugin. Here’s an example where a panel has three buttons. These buttons will be arranged horizantally when the page is viewed in a tablet but will be arranged vertically when viewed in a phone. We can compare the width of the devices and implement this.
Ext.onReady(function(){ Ext.create("Ext.panel.Panel",{ renderTo : Ext.getBody(), plugins : "responsive", title : "Sample Panel", responsiveConfig: { 'width > 600': { layout : { type:"hbox", pack : "center" } }, 'width <= 600': { layout : { type:"vbox", align : "center" } } } }); });
The Panel has the responsive plugin used and the rules are specified in the responsiveConfig property, where the width is compared. Figure 1.0 shows the panel when viewed in a Nexus 7 tablet using Ripple Emulator. Figure 2.0 shows the panel when viewed in an iPhone.
Figure 1.0: Buttons arranged horizontally in a tablet
Figure 2.0: Buttons arranged vertically in a phone