What’s New In Ext JS 6
Introduction
With Ext JS 6, Sencha is introducing a single framework for creating applications that run across all types of devices, from phones to tablets to desktops. You will be able to blend the best of both worlds to produce the optimal user experience for the device and at the same time share code. Combined with a compelling new theme, Ext JS 6 has everything you need to create amazing apps that run everywhere.
Merging Ext JS and Sencha Touch
The process of merging Ext JS and Sencha Touch has come a long way. In Ext JS 5, Sencha reconciled the core of its frameworks (Ext.data, Ext.app and much more) into the “core” package. The visual layer remained as part of Ext JS proper in the “ext” package. The final step of merging the Sencha Touch visual components required a home for these distinct aspects of the framework. To differentiate the component families from each other in Ext JS 6, we use the term “toolkit”.
Toolkits
A “toolkit” is a package that contains only the visual elements of the framework. These include components like panels, buttons, grids and the rest. There are two toolkits in Ext JS 6: classic and modern.
The visual elements of Ext JS are now contained in the classic toolkit of Ext JS 6, while the visual elements of Sencha Touch are now contained in the modern toolkit.
Applications can simply choose their toolkit and add this to the Sencha Cmd generated app.json:
“toolkit”: “classic”, // or “modern”
Universal Applications and Smart Phones
With Ext JS 6 and Sencha Cmd 6, however, you can create Universal Applications that can use both toolkits. In this way you can create a single application that targets mobile devices like smartphones (by using the modern toolkit) and corporate desktops running IE8 (using the classic toolkit).
You can indicate which toolkits use which themes by omitting a toolkit key in your Sencha Cmd generated app.json and, instead, include a modified builds block.
“builds”: { “classic”: { “toolkit”: “classic”, “theme”: “theme-triton” }, “modern”: { “toolkit”: “modern”, “theme”: “theme-triton” }}
As you can see, we are designating “theme-triton” for both classic and modern toolkits, but you could adjust the themes in any way you see fit.
If you have the above builds block in your app.json a “sencha app build” would build both designated builds into unique folders. You may also singularly build by targeting the build key name. For instance:
sencha app build modern
Our Sencha Cmd generated starter app provides you with a working sandbox to use as a entry point for your application.
For more information about build profiles, please checkout the Developing for Multiple Screens and Environments guide
Triton Theme
The Triton theme is the first Ext JS theme to provide comprehensive support for “font icons”. Many of the icons used in Triton are from Font Awesome with some useful additions to complete the ensemble. Using Triton, applications can easily control the size and color of icons since they are based on scalable fonts.
Support for font icons includes such items as panel tools, tree icons, form field triggers, button arrows, checkboxes, radio buttons, grid action icons, grid column and filter menus, slider thumbs, box and border splitters, toolbar overflow indicators … and more. Pretty much all visual elements can use font icons.
Charts
Pie 3D
The biggest new features in the charts package are the improvements to the Pie 3D chart. It now supports labels and configurable 3D aspects.
The various sliders allow you to manipulate the 3D appearance of the chart.
Plugins
The new itemedit plugin allows users to drag markers to edit the underlying data.
Events
Declarative renderers (named methods implemented by a ViewController) are now supported for series labels, items, and tooltips.
Fashion
Fashion is Sencha’s new Sass compiler written in JavaScript that runs in the browser. Combined with PhantomJS, we use Fashion for Sass builds in Sencha Cmd as well as for app watch. This means no more Ruby system requirement!. Because Fashion runs in the browser, we will not need to build the Sass twice (once for the slicer and again with the minimum required content). More importantly, we can do incremental rebuilds of the Sass during app watch, which is a real benefit during development.
But there is an even more important benefit to app watch using Fashion - Live Updates! You can open an application in a (modern) browser and the Sass files we be loaded instead of the generated CSS. Fashion can then react to file changes and update the CSS without reloading the page.
Grid
Spreadsheet
The new spreadsheet model introduced in Ext JS 5.1 now has a couple of cool new features. The selection can be madeextensible (by setting extensible:true). This adds the “drag-corner” or a small block on the bottom-right corner of the selection. This allows the current selection to be extended either vertically or horizontally.
This will be often combined with a plugin that will use the current selection to replicate values into the expanded area (again like a spreadsheet).
Actionable Mode / Accessibility
Grids also support ARIA’s “actionable mode” - an extension of our traditional cell edit mode. This allows all kinds of cell content to be focused and activated using only the keyboard. This is a huge step for accessibility but also makes for happy keyboard users since they can interact with anything in the grid without their hands leaving the keyboard.
Enter actionable mode using the F2 key. ENTER also starts cell editing which is now an example of actionable mode.
Locking grids
Navigation within a locking grid now navigates across the locking boundary. This is in both “navigable mode” (The default cell navigation mode), and “actionable mode” when cell contents are accessible and visited using the TAB key.
Pivot Grid
The pivot grid component is now incorporated in the “pivot” package and lives in the Ext.pivot namespace. The main enhancements to the pivot grid are seen in the configurator plugin.
Enhanced Configurator
The interface to the configurator has been revamped and can now be docked on any side, including on the right (or left) as shown above.
Screen Reader Support (Accessibility)
We have integrated ARIA functionality directly into the component life-cycle. This means you won’t need a special “aria” package to get correct ARIA behavior. Applications will now support screen readers (like JAWS) without additional effort.
Microloader
Sencha Cmd 6 now includes localStorage caching of assets. This is similar to Sencha Touch’s production microloader but with some important improvements.
Caching can be disabled in app.json
Only microloader content will ever be erased by the microloader
Only the current version of an app will be kept in local storage
Browser Support
Modern Toolkit
DESKTOP
IE11+
Firefox and Firefox ESR (Latest 2 Versions)
Chrome (Latest 2 Versions)
Safari 7+
MOBILE
IE11+
Safari 7+
Android 4.0+ Chrome
Android 4.4+ Native
Classic Toolkit
DESKTOP
IE8+
Firefox and Firefox ESR (Latest 2 Versions)
Chrome (Latest 2 Versions)
Safari 7+
Opera (Latest 2 Versions)
TABLET
Safari 7+ (iPad)
Android 4.0+ Chrome
Android 4.4+ Native
Windows 8 Touch Screen - IE10+
Last updated
May 27, 2015