The Sencha Team is excited to announce the availability of Sencha Ext JS 7.4, the most recent milestone version update for our Best Javascript Framework.
This release includes many highly requested features and upgrades, including four new rich Javascript Grid features, as well as the resolution of 15 customer-reported tickets for both Classic and Modern Toolkit. Are you excited about the new Ext JS 7.4 features such as the grouping panel, summaries for groups and total, and the filterbar?
Continue reading to find out more about these topics!
Table of Contents
What’s New in Ext JS 7.4
Multi-level Grouping
The MultiGrouping grid feature allows the Grid Panel to display the Store data that is grouped by multiple groupers. Here is an example of what it looks like:
Classic Toolkit Feature
Modern Toolkit Plugin
Grouping Panel
This plugin allows your end-users to drag and drop grid columns to the grouping panel section that is visible above the grid panel.
The user can move the dimensions in the grouping panel in which order he/she wants.
Classic Toolkit Plugin
Summaries for groups and total
Quickly define functions for aggregation such as sum, min, max count and more per column.
Grouping Summary in Classic Toolkit.
Grouping Summary in Modern Toolkit.
Filterbar
This classic and modern toolkit plugin will add a docked bar under the grid headers and depending on the grid columns configuration, filter fields will be added.
Filterbar in Classic Toolkit.
Filterbar in Modern Toolkit.
New KitchenSink examples
Ext JS 7.4 will bring new Grid examples in KitchenSink to help show how to configure and use the new 4 Grid features.
Modern – Multi level grouping and Summaries
Classic – Multi level grouping and Summaries
Bug Fixes
With 15 bug fixes, this release brings a solid set of improvements that the Ext JS users have been waiting for.
Please see the Ext JS 7.4 release notes
ExtGen and Sencha Cmd
ExtGen 7.4 and Sencha Cmd have been updated to support Ext JS 7.4.
With Open Tooling, @sencha/[email protected], you can unlock many build features of Sencha Cmd by passing environment options through your npm scripts. These options are then sent to Sencha Cmd via Sencha’s custom webpack plugin.
You now can enable the dynamic package loader from your scripts by passing an environment variable through the webpack plugin: –env.cmdopts=–uses. You may recognize this is the same flag used by Sencha Cmd CLI. Sencha’s custom webpack plugin exposes the variable cmdopts to your npm scripts. Within the webpack plugin, this variable is parsed into an array of build options for Sencha Cmd. Building for testing is also available by Cmd Opts.
Explore the Building npm based Applications docs for more information.
What’s Next?
The engineering team is pacing well on regular quarterly releases and we are committed to delivering new features, quality, performance and usability enhancements and improvements all along.
The work on supporting Ext JS 7.4 in Sencha Architect, Sencha Themer, Sencha Upgrade Advisor and Sencha Bridges (ExtReact, ExtAngular and ExtWebComponents) is in full swing*! Our goal is to provide you with continual support through quality and performance enhancements. If you have any feedback or questions, drop us a note here or get in touch.
*Features are not committed until completed and GA released.
This is exciting news but, once again, Sencha Architect lags behind the framework release. So what are we looking at, here? A week? A month? Half a year? Will the new Apple ARM processors be supported in the new version of SA?
Really looking forward to getting my hands on the new features!
Hi Mike,
Happy to hear you’re excited about the new grid features we just released. The team is working on adding the new grid features to Sencha Architect. This also includes support for the new Apple ARM processors.
The 7.4 Architect release is targeted for release in early Q3 this calendar year. Please note that features are not committed until completed and GA released.
Thank you, Kegan. I appreciate the update.
M. McConnell
Hi,
Awesome work Sencha team, congrats for the new release and we are soexcited to test it and use in our web applications.
Also we apsolutely agree with @Mike McConnell – we need this features supported by SA asap.
One suggestion for SA, please provide to Sencha users Sidebar menu in SA template as is a standard menu for modern web applications.
Thank you.
Kind Regards
Boban
Excellent write up on what looks like a solid release! Congrats!
Love it! Can’t wait for architect to be updated!
You guys read my mind! This release has exactly what I needed right now! It’s incredible :)! This made our product jump far ahead!
Now the grids are really powerful.
Thanks a lot for this stuff!
Btw. for those looking to integrate the new grid features in Architect right now, it’s quite simple. Just override your grid and add the desired plugins and features. Then add custom properties on the columns, like the summaries, etc.
…
override: ‘MyGrid’,
plugins: {
groupingpanel: true,
gridsummaries: true,
gridfilters: true
},
features: [{
ftype: ‘advancedgroupingsummary’,
startCollapsed: true,
startGroupedHeadersHidden: true,
summaryTpl: ‘Summary’,
groupsColumnWidth: 180
}]
…
Hello,
Filterbar seems to be very good option.
Can we provide filterbar list a seperate store. This would be usefull when we are having remote store in grid and not records are loaded in grid. In this case the filterbar list should show all distinct value for that column, even if not loaded. This can be accomplished by giving seperate store to the filterbar list
I did not see this anywhere in docs.
Could you please comment
Users can use the options config property for the list filter type
Options:
An array of values or a store configuration
Api Doc:
https://docs.sencha.com/extjs/7.4.0/classic/Ext.grid.plugin.filterbar.filters.List.html#cfg-options
Usage Example:
dataIndex: 'user',text: 'User',
filterType: {
type: 'list',
options: {
autoLoad: true,
fields: [{
name: 'id'
},{
name: 'text',
mapping: 'name'
}],
proxy: {
type: 'ajax',
url: 'https://jsonplaceholder.typicode.com/users',
reader: {
type: 'json'
}
}
}
}