Sencha Ext JS 6.5 release was announced, recently. Various enhancements have been introduced to the framework, especially to the Modern toolkit. With this release, desktop features like Grid enhancements, Cell editing, Virtual store, Date panel, Forms, Fields and validations, Pivot enhancements, and List enhancements there is a lot in Modern toolkit for a Desktop application developer. Now, Modern toolkit can be used to create a true universal application for Desktop, Tablet, and Phone – using one single framework.

This article talks about framework features that you can leverage to create an application targeting different form factors. For a complete architect, designer & developer level insight into design, develop and test universal application using Ext JS 6.5 Modern toolkit listen to the Webinar recording:

Generating starter application

Sencha Cmd stays as the way to generate a new application. You can continue to pass the toolkit name as a command line option to Sencha Cmd or configure it inside app.json file. Here is a sample command:

Creating platform specific views

Profile

Application Profile is a way to profile your devices and offer tailored behaviour to the users for those category of devices. You can create different profiles for Desktop, Tablet, and Phone and develop different views, controller, model, and store logic. In case you have defined three different profiles in your application, the framework evaluates each of the profiles and considers the first profile whose isActive method returns true. And based on the mainView config on that profile class, the application view (and related classes) construction begins.

platformConfig

platformConfig is available on every class. This is a great way to control the instantiation/construction of your class as well as component. This config would let you configure a class based on the detected platform. So, whether you want to have a Pull To Refresh mechanism for pagination or Load More button based on the underlying platform rules, you can very well control it using platformConfig. Here is a typical example of this config on a list component:

responsiveConfig

On a specific platform, if there is a need to change the UI based on the dynamic conditions, e.g. switching from portrait to landscape mode, responsiveConfig is very useful to create unique user experience. E.g. if you want to show only couple of important columns in a grid in portrait mode and want to show additional columns in the landscape mode, then you can make use of this config, which is offered by the Ext.mixin.Responsive mixin. Here is an example usage of the config on a grid component:

Sharing code across platforms

In the previous section, you looked at the different options to customize experience for different platforms. When you do that, the framework lets you fully tailor the experience by creating different views, controllers, models, and stores per platform. However, there would be situations where you would like to reuse as much as possible, if there is not too much of difference in features that you offer on different platforms. In that case, you can apply different strategies:

• Use Profile to create unique views and reuse controller, model and stores
• Create common view and use platformConfig and responsiveConfig to offer platform specific experience and reuse controller, model and stores

Summary

For Ext JS users 6.5 is an awesome release with great timing, especially, when everyone is talking about one framework to build application for different form-factors. With the richness of the framework – full client-side data management, data connectors, rich themable components, complex layouts – I am sure you will find everything that you need to build your next multi-platform data-driven application.

In case you have question about your Ext JS ROI, feel free to contact us and we will help you understand that – with no subjectivity.

What’s Next?

• Webinar recording
• Try Ext JS 6.5 components and features
• Explore Ext JS API docs
• Read about Sencha Ext JS