In our recent webinar on Creating Universal App Using Sencha Ext JS 6.5 Modern Toolkit, we presented the enhancements made to the Modern Toolkit in its latest release. We also created a cross-platform Universal Application for Desktop, Tablet and Phone by only using the Modern Toolkit. We showed how to offer a unique experience by creating different views for different platforms and yet reuse the code across platforms.
There were some great questions and we think it’s worth sharing for the benefit of the community.
What platform and responsive rules can I use? And, is there a way to extend or modify them?
The properties (rules) of platformConfig object are evaluated in the context of tags contained in Ext.platformTags. You can modify this object to include custom tags, which will then be available to platformConfig.
The responsiveConfig object can consist of certain pre-defined rules, though these rules can be combined to create complex rules as far as they form valid JavaScript expressions. The Ext.platformTags properties can also be used in the responsiveConfig object.
Is it required to use all the three – profile, platformConfig and responsiveConfig?
The Ext JS framework offers different mechanisms to customize experience for different platforms. It’s just a matter of discretion to pick the right tool for a particular situation.
You can use the platformConfig for simple tuning at load time and the responsiveConfig for more dynamic conditions. But if there is a need to change things on a larger scale, Ext.app.Profile is a good choice. Moreover, for an application to look completely different in different environments, Sencha Cmd build profiles are also offered. You can mix and match these mechanisms to ensure that your application performs well on the widest possible range of devices and offers a unique user experience that is best for the target device.
Can I select days in Date panel?
No. The datepanel presents one or more calendar months from which the user can only select a single date.
In forms, you mentioned about layout. Can I create a two column form?
The Modern Toolkit does not support the column layout as in the Classic Toolkit but, you can create a two column form by:
-
- grouping related field components in a fieldcontainer
- arranging different sets of fieldcontainer in a vbox/hbox layout
Can we apply different themes for different platforms?
Yes, you can apply different themes for different platforms by making the following changes to app.json and index.html
- In app.json,
- Comment out the theme property (approx. at line no. 6)
- Add the following property to the bootstrap object (approx. at line no. 329)
1 |
<span style="font-family: Rubik;">"manifest": "${build.id<span style="font-weight: 400;">}.json”</span></span> |
- Add the builds object (approx. at line no. 460). This is assuming that your app supports all three profiles.
1 2 3 4 5 6 7 8 9 10 11 |
<span style="font-family: Rubik;"> "builds": { "desktop": { "theme": "theme-triton" }, "tablet": { "theme": "theme-ios" }, "phone": { "theme": "theme-material" } }</span> |
2. In index.html, add the following script tag
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 |
<span style="font-family: Rubik;"><script type="text/javascript"> var Ext = Ext || {}; Ext.beforeLoad = function (tags) { var s = location.search, // the query string (ex "?foo=1&bar") profile; if (s.match(/\bdesktop\b/)){ profile = 'desktop'; } else if (s.match(/\btablet\b/)) { profile = 'tablet'; } else if (s.match(/\bphone\b/)) { profile = 'phone'; } else if (tags.desktop == true) { profile = 'desktop'; } else if (tags.tablet == true) { profile = 'tablet'; } else { profile = 'phone'; } Ext.manifest = profile; // this name must match a build profile name }; </script> </span> |
3. Build and run the application.
How can I package my application as a mobile app?
Sencha Cmd provides a build system that supports multiple build profiles and Cordova takes full advantage of this feature. You can package such a Universal application as a mobile app using Cordova.
Do I still need to use Classic toolkit?
Sencha recommends the use of Modern Toolkit for new projects but the Classic Toolkit may be the right choice if
- your application has to support older browsers IE8 / 9 / 10
- your application needs features like locking grids, RTL and advanced Accessibility support
Does Modern toolkit support new PWA feature that comes with Cmd?
PWA feature is handled by Sencha Cmd. So, yes. You can make your application PWA compatible using the same Sencha Cmd instructions.
What is the level of customization possible for different platforms?
Ext JS framework lets you fully customize the experience by creating different views, controllers, models, and stores per platform. To further serve the right experience, you can also use build profiles in app.json to customize the theme, locale and other settings.
However, there would be situations where you would like to reuse as much code as possible if there is not too much difference in features that you offer on different platforms. In that case, you can apply different strategies:
- Use profile to create unique views and share controllers, models and stores
- Create common views and use platformConfig and responsiveConfig to offer platform specific experience and reuse controllers, models and stores
- Create generic view classes, subclass them and use platformConfig and responsiveConfig for customization. Share the controllers, models and stores.
In case you have any further question, we are here to answer. Please post them as comments so that others can also benefit from them.
