Announcing Sencha Ext JS 6.7 and Tooling GA
On behalf of the entire Sencha team, we’re excited to announce the release of Sencha Ext JS 6.7 with major enhancements to the Modern toolkit. The Ext JS 6.7 Modern toolkit now supports grid filtering, grid locking, virtual scrolling for infinite grid, material chip, multiselect combobox and color picker. The Ext JS 6.7 Classic toolkit now includes multiple component enhancements to grid, calendar, panel, charts, window, combobox, tabs and dashboard. The JetBrains, Eclipse and Visual Studio plugins now support the latest 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 criterias of text, boolean, date, number filters.
- Locking Grid – Similar to Excel, lock columns in left or right region.
- Chip – Material design inspired compact component with thumbnail and text.
- Multiselect Combobox – Combobox with 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 firstname.lastname@sencha.com, 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.
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 text filter, the grid column filter supports the following grid filters:
- Text grid filter that limits results to values matching specific text.
- Boolean grid filter that limits results to values matching true or false.
- Date grid filter that limits results to values matching specific date constraints.
- Number grid filter that limits results to values matching specific number constraints.
A Kitchensink example is provided that shows all of the capabilities of Grid filter plugin, including ability to manage all filters globally.
![](/wp-content/uploads/2019/02/kitchenSinkScreenshot1.png)
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.
![](/wp-content/uploads/2019/02/kitchenSinkScreenshot2.png)
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.
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.
![Modern Triton XD Button Stencils](/wp-content/uploads/2019/02/combobox.png)
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.
![Modern Triton XD Button Stencils](/wp-content/uploads/2019/02/combobox2.png)
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.
![Modern Triton XD Button Stencils](/wp-content/uploads/2019/02/colorpicker.png)
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.
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.
![](https://staging.sencha.com/wp-content/uploads/2024/08/rapid-extjs-3.png)
We’re excited to announce the official release of Rapid Ext JS 1.0, a revolutionary low-code…
![](https://staging.sencha.com/wp-content/uploads/2024/08/arc-1.png)
The Sencha team is pleased to announce the availability of Sencha Architect version 4.3.6. Building…
![](https://staging.sencha.com/wp-content/uploads/2024/08/ReExt-Banners-Master-File-1.png)
Sencha, a leader in JavaScript developer tools for building cross-platform and enterprise web applications, is…