Announcing Sencha Ext JS 6.7 and Tooling GA

On behalf of the entire Sencha team, we are pleased to announce the release of Sencha Ext JS 6.7, which includes significant enhancements to the Modern toolkit. The Ext JS 6.7 Modern toolkit now supports Javascript Grids such as grid filtering, grid locking, virtual scrolling for the infinite grid, material chip, multi-select combobox, and color picker which can help on Processing massive amounts of data and able to load and manipulate large data sets within milliseconds! The Ext JS 6.7 Classic toolkit now includes enhancements to the grid, calendar, panel, charts, window, combobox, tabs, and dashboard components. The JetBrains, Eclipse, and Visual Studio plugins now support the most recent IDE versions.

Highlights of Ext JS 6.7 and Tooling

New Modern features in this release include:

• Grid Filtering – Easily display grid records that meet multiple criteria of text, boolean, date, and number filters.
• Locking Grid – Similar to Excel, lock columns in the left or right region.
• Chip – Material design inspired compact component with thumbnail and text.
• Multiselect Combobox – Combobox with the ability to select multiple chips.
• Multiselect Select – Easily select multiple values in the select field.
• Color Picker – Beautiful color picker with HSVA and RGB options

Ext JS tooling updates in this release include:

• ExtGen – New open tooling templates to support Ext JS 6.7
• Sencha Cmd – Enhanced control over application compression options
• JetBrains IDE Plugin – supporting the latest 2018+ versions
• Eclipse IDE plugin – supporting the latest Eclipse Neon, Oxygen and Photon
• Visual Studio IDE plugin – supporting Visual Studio 2017
• 4 Ext JS Examples – supporting Ext JS 6.7 and open tooling

Try Ext JS 6.7

• Download the free 30-day trial of Sencha Ext JS 6.7 with open tooling
• Read the getting started with open tooling and access API docs
• View the Ext JS 6.7 examples on any device
• Customers can use their Support portal login* to get access to the Ext JS framework, cmd and all Ext JS npm packages

*Note: npm requires you to replace @ in login with “..”. For example, if your login to support portal is [email protected], your login to npm registry will be firstname.lastname..sencha.com. You can use your existing support portal password.

Upcoming Webinar

Join us for our upcoming webinar where you will learn about the key capabilities of Sencha Ext JS 6.7 and Ext JS Tooling.

Register Now

Learn What’s New in Sencha Ext JS 6.7 and Ext JS Tooling
Date: Wednesday, February 20, 2019
Time: 10am PST / 1pm EST

What’s New in Sencha Ext JS 6.7

Grid Filtering

Ext JS 6.7 Modern Grid provides grid filtering, so that end-users can display grid records that meet specified criteria. Apart from the text filters, the grid column filter supports the following grid filters:

1. Text grid filter that limits results to values matching specific text.
2. Boolean grid filter that limits results to values matching true or false.
3. Date grid filter that limits results to values matching specific date constraints.
4. Number grid filter that limits results to values matching specific number constraints.

A kitchen sink example is provided that shows all of the capabilities of Grid filter plugin, including the ability to manage all filters globally.

Ext JS Grid Filtering Kitchensink Example

Grid Locking

Ext JS 6.7 Modern Grid provides Locking Grid, so that end-users can lock columns or “freeze pane” similar to Excel. The locking grid provides a column menu that provides users with the ability to lock a grid column on the left region or right region. The locking grid column menu will show current locked status.

Ext JS Grid Locking Kitchensink Example

Chip/Tags

Ext JS 6.7 provides compact material Chip that can be used in common user experience tasks like making a selection, filtering content and triggering actions. The chip component view with thumbnail and text can be created as shown below. You can configure displayTpl to provide different chip views for desktop vs mobile.

chipView: {
iconField: ‘avatar’,
displayField: ‘name’,
platformConfig: {
‘!phone’: {
displayTpl: ‘{name} ({email})’
}
}
},

Multiselect Combobox and Select

Ext JS 6.7 provides Multiselect Combobox, so that end-users can see multiple selected values as tags in the combobox. A standard comboBox combines a traditional HTML text input field and a select field. If the editable config is true, then the user is able to type freely into the field, and/or pick values from a dropdown selection list. The Multiselect combobox also provides the option for “multiselect: true”, allowing end users to select multiple values in a combobox. The selected values can be navigated using keyboard arrow keys and can be deleted with the delete key.

Ext JS Email Form Kitchensink Example

Ext JS 6.7 also provides Multiselect Select, so that end-users can select multiple values in the select field.

Ext JS Register Form Kitchensink Example

Color Picker

Ext JS 6.7 provides Color Picker, so that end-users can select the color picker using color swatch, form field or color selector. The color picker provides options to select color using HSVA or RGB.

Ext JS Color Picker Kitchensink Example

Virtual Scroller

Ext JS 6.7 provides a virtual scroller that allows for scroll range beyond a browser’s normal scroll range. Virtual scrolling is used by default for all infinite lists and grids. This allows for a number of rows far greater than a browser’s normal maximum scroll range.

scrollable: {
type: ‘virtual’,
infinite: true // enable MAX_SAFE_INTEGER scroll
},

What’s New in Ext JS 6.7 Tooling

ExtGen Templates

ExtGen 6.7 now contains updated templates for creating desktop as well as mobile applications that support the Ext JS 6.7 framework. The templates allow you to use both Classic and Modern toolkit. You can create desktop and mobile applications using just Modern toolkit or create universal applications with both Classic and Modern toolkits.

Better Compression with Sencha Cmd

Sencha Cmd 6.7 ships with an upgraded closure compiler that enhances your control over compression options. Cmd 6.7 provides you with options to easily change compression levels to enhance code obfuscation and reduce footprint size to meet your requirements. The closure compiler API provides different levels of compression and release notes include examples on using those options.

JetBrains 2018+ IDE support

JetBrain IDE plugins are updated to support apps generated using ExtGen and available in a href=”https://plugins.jetbrains.com/plugin/7740-sencha-ext-js”>marketplace. The Code completion, code generation, code navigation, code inspection, code refactoring and documentation lookup are now supported for ExtGen apps. The updated plugin supports the latest JetBrains IDEs that include IntelliJ 2018+, WebStorm 2018+, PhpStorm 2018+, RubyMine 2018+ and PyCharm 2018+.

Eclipse Latest IDE support

Eclipse IDE plugins now support apps generated using ExtGen and available in a href=”https://marketplace.eclipse.org/content/sencha-eclipse-plugin”>marketplace.. The Eclipse plugin now supports Eclipse IDEs Neon, Oxygen and Photon. The code completion, code generation, code navigation and documentation lookup are now supported for all new Eclipse IDEs.

Visual Studio 2017 support

Sencha Visual Studio Plugin is now supported for Visual Studio 2017 and available in marketplace. Visual Studio 2017 IDE Plugin supports a consistent code completion experience inside the IDE for:

• Config, method and property names for all Ext JS and user classes
• Alias properties such as xtype, controller, viewModel and layout
• Event names and listeners objects
• Controller methods in listeners
• Properties from the ViewModel in bind configs

Note: To enable Ext JS code completion support, you will need to disable the VS2017 JavaScript language service.
The Sencha Visual studio plugin supporting 2015 continues to be available in marketplace.

Ext JS 6.7 Examples

Ext JS 6.7 provides a number of examples that are built using open tooling. You can use these apps to get started quickly with Ext JS 6.7 and open tooling:

• Full Stack Employee Directory (Coworkee) application – Github Repo
• Full Stack Progressive Web App (PWA) Application – Github Repo
• Modern Tutorial Sample Application – Github Repo
• Quick Start Sample Application – Github Repo

More Features and Performance Improvements

Ext JS 6.7 includes updates and enhancements to multiple components as well as bug fixes in both the Modern and Classic toolkit. The Ext JS 6.7 Classic toolkit includes multiple enhancements to grid, calendar, panel, charts, window, combobox, tabs and dashboard. Ext JS 6.7 withstood extensive testing phases including automated testing with Sencha Test, resulting in more than thousand test cases.

Try It and Share Your Feedback

We’re looking forward to seeing the awesome web applications you create with Ext JS. We hope you enjoy building apps with Ext JS 6.7 and look forward to reading your feedback in the Ext JS forum.