Announcing Ext JS 6.2 GA

On behalf of Sencha and the entire Ext JS team, I’m excited to announce the availability of Sencha Ext JS 6.2. This release delivers a number of new features and provides numerous enhancements to help you build powerful, data-rich, cross-platform web applications for desktop, tablets, and smartphones. I would like to thank the Sencha community and our customers who have provided invaluable feedback during the Ext JS 6.2 Early Access program.

New in Ext JS 6.2 – Highlights

D3 Adapter integrates the D3.js library with Ext JS core classes and provides some of the most commonly used D3 visualizations as ready-to-use components.

Calendar Component provides all the building blocks you need to include advanced calendaring capabilities in your Ext JS applications.

Exporter now supports native XLSX format, as well as many other common export formats such as CSV and TSV.

Material Theme closely follows the Material Design spec to ensure all of your apps look fresh and clean on any device.

iOS Theme is an all new theme for iOS devices to go along with the Material theme.

Modern Pivot Grid includes all of the powerful data analysis capabilities of the Pivot Grid introduced in Classic toolkit; now also available in the Modern toolkit.

Viewport Zoom & Native Scrolling enables pinch or double-tap gestures on mobile devices, so you can zoom in or out when things are just a bit too small.

Grid Enhancements in both the Modern and Classic toolkits. Exciting new functionality such as ‘row body widgets’ allow you to add components to the row body, so you can create a grid inside a grid.

Edit: Please visit Ext JS Packages to see which features are included in each Ext JS package.

Try It Out

• View the Ext JS 6.2 examples on any device
• Download the free 30-day trial of Ext JS 6.2
• Learn more about Ext JS 6.2 by reading our guides and documentation
• Register for our upcoming webinar – Innovations in Web App Dev with Ext JS 6.2, Themer 1.0, and Architect 4.0

Deep Dive into Ext JS 6.2

D3 Adapter

Ext JS is well-suited to building powerful, data-rich, cross-platform web applications, and data visualization is a key component of these applications. For a long time, Ext JS has had components that help you summarize data and explain the story to users. These components include our Grid and Pivot Grid for tabular presentations, as well as the Sencha Charts library. You can use these components to concisely present data graphically.

With Ext JS 6.2, we have integrated the popular Data-Driven Documents package, commonly known as D3, to help you create dynamic visualizations and help your users to explore their data and understand what stories it has to tell. As a lightweight and extremely flexible and popular JavaScript library, D3 is a great fit for Ext JS apps.

We’ve created a thin wrapper around many common D3 visualizations, which understands how to talk to Ext JS. It’s simple to create complex visualizations that fit seamlessly into the user experience that you’re creating within your Ext JS applications. The Ext JS D3 Adapter gives you the opportunity to create more unique, customized, dynamic visualizations than ever before.

Calendar Component

Ext JS 6.2 adds an all new calendar component to the framework that can help you easily view and manage schedules and events.

Building calendars for your web application is a pretty difficult task, given the complexity of the component itself, and the range of perspectives (day, week, month, etc.) that users like to see. The Ext JS Calendar component gives users the flexibility to zoom in or out over different timeframes, so they can see the appropriate level of detail. For applications that have geographically distributed users, the Calendar component provides a timezone configuration option as well. In addition to dealing with different events, users sometimes need to juggle events from multiple calendars – perhaps incorporating work, personal, and team calendars. The Calendar component makes it easy to consolidate them into a single view. The list of events in the Calendar component comes from an Ext JS store, so you can even import external calendar data from providers such as Google.

By leveraging this component, you can easily add a fully-functional calendar to your apps without investing a lot of time and effort in building one.

Exporter

We have enhanced the Exporter package that came with Pivot Grid to include export for CSV, TSV, and HTML formats, as well as a capability to select / configure the exports for visible or invisible (hidden columns) data in your Grid displays. The Exporter package now also allows column styling in the exported documents, and all these enhancements work in both Classic and Modern toolkits for both Grid and Pivot Grid.

Material Theme

Since its release, Google’s Material Design language has become increasingly popular when it comes to creating delightful user experiences. The design makes use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

With Ext JS 6.2, we are rolling out a new “Material” theme (most requested feature) for the Modern toolkit. It implements the Material Design spec for every single UI component in the Modern toolkit.

Material Design is much more than just color and icons, so our new material theme handles everything from spacing and fonts to shadows and ripples effects. You no longer need to create a “Material Theme” from scratch, because it’s all available out of the box.

iOS Theme

To go along with the “Material theme”, we have also created a new theme for iOS devices following the UI specifications for iOS 9, and the future releases of iOS Theme will evolve along with the style of future releases of iOS.

Modern Pivot Grid

Since the launch of Pivot Grid as a Classic toolkit component in Ext JS 6, several of you who were building applications with the Modern toolkit requested a “Modern Pivot Grid”.

With Ext JS 6.2, we’ve added Pivot Grid for the Modern toolkit with all the same capabilities as the Classic Toolkit Pivot Grid. The Modern Pivot Grid comes with different layouts and styling elements, plus the various plugins for drilldown, drag-and-drop configurator, range editor, and exporter – all of which are optimized for touch-enabled devices as well as desktop.

Viewport Zoom & Native Scrolling

Using pinch or double-tap is a common gesture on mobile devices to allow users to zoom in or out when things are just a bit too small. Ext JS 5 and 6 provided a virtualized scrolling experience to work around the lack of support for momentum scrolling on older mobile browsers. This meant that the framework could not support pinch-to-zoom (or viewport zoom), because enabling pinch-to-zoom would interfere with the touch event stream that the virtual scroller relied upon.

Because the mobile browsers now support momentum scrolling, virtualized scrolling is no longer needed. Supporting the browser’s native ability to pan and zoom the viewport, however, required us to revisit several core areas such as momentum scrolling and gesture processing as defined in the Pointer Events spec.

With Ext JS 6.2, momentum scrolling is now supported natively on all mobile browsers and uses the native scrollers for all devices and browsers. This allows the framework to support pinch-to-zoom at the viewport level on all touch-screen devices.

Grid Enhancements

As always, we keep enhancing the Ext JS Grid, as it’s the most popular component used by our developers, and we get the largest number of enhancement requests for our Grid. One of the most prominent new features we added to the Grid is the new ‘Row Body Widgets’. This allows other components to be rendered in the row body of a grid. So now you can use any component, even a grid, inside a grid.

The component rendered using the Row Body Widget has access to the row’s record through its ViewModel, so you can perform all sorts of operations such as sorting, filtering, etc. on the grid rendered inside a parent grid. This feature is available for Classic and Modern toolkits, so both toolkits now have the ability to define components inside the row body of a grid.

We highlighted some of the most significant updates in Ext JS 6.2, but there’s a lot more to talk about. You can explore the other new features, enhancements, and improvements in our What’s New in Ext JS 6.2 guide. As always, we’ve added and updated many of our docs and guides for new features, enhancements, upgrades, and more in Ext JS 6.2.

Sencha Cmd 6.2

We have also released Cmd 6.2, which not only adds support for Ext JS 6.2 and the new features, but it also supports other new and revised tools that we’re rolling out simultaneously. Cmd 6.2 supports Sencha Themer 1.0, our new theming tool, and Sencha Architect 4.0, which adds support for the Modern toolkit. You can download Cmd for free from the product download page or by logging into the Support portal.

Thank You

We’re proud to release this version and continue to evolve Ext JS as the best way to build complex, data-rich, cross-platform web applications for desktops, tablets, and smartphones. We wish to extend our heartfelt thanks to our community and customers. Your constant involvement, feedback, and bug reports have made it possible for us to achieve this huge milestone. We hope you enjoy building great apps with Ext JS 6.2 and look forward to more feedback in the Ext JS 6 forums.