On behalf of the entire Sencha team, we’re excited to announce the release of Sencha Ext JS 6.6 with support for npm packaging and open tooling. With npm packages, Ext JS 6.6 now supports exceptionally easy workflows that every JavaScript developer is familiar with. With Open tooling, Ext JS developers now have powerful tooling to rapidly generate, build and update Ext JS applications. Ext JS 6.6 also brings several major enhancements to Ext JS, including new modern components, a new beautiful accessible theme, modern localization, advanced routing, and enhancements to several Ext JS components and the framework.
Table of Contents
Highlights of Ext JS 6.6
Ext JS 6.6 with npm and open tooling fundamentally changes how you build and create Ext JS apps. New features in this release include:
- Ext JS npm Packages – Ext JS standard and premium components, themes and framework are now available in npm packages hosted by Sencha npm repository
- ExtGen – New open tool that lets you generate new Ext JS apps by asking you a series of questions and provides you with a number of new app templates
- ExtBuild – New open tooling to build and transpile your apps
- New modern components – Modern time field and time panel component that provides an analog time view based on material design specification
- New beautiful Graphite theme that makes your accessible apps visually stunning
- Localization support for modern applications
- Dynamic Styling of applications using Material Theme
- Advanced Ext JS routing enhancements
- Enhanced gauges component with improved ability to display interval values
Try Ext JS 6.6 with Open Tooling
- Customers can use their support portal login* to get access to all Ext JS npm packages and open tooling
- Download the free 30-day trial of Sencha Ext JS 6.6 with open tooling
- Read the getting started with Ext JS NPM and Open Tooling
- Learn about all new 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.
Try Ext JS 6.6 with Cmd 6.6
- Customers can download Sencha Ext JS 6.6 by visiting the Support portal
- Download the free 30-day trial of Sencha Ext JS 6.6
- Download Cmd 6.6.0
- Read the guides and documentation
- View the Ext JS 6.6 examples on any device
Upcoming Webinar
Join us for our upcoming webinar where you’ll learn about the key capabilities of Sencha Ext JS 6.6 with Open tooling.
Learn What’s New in Sencha Ext JS 6.6 and Open Tooling
Date: Tuesday, July 10, 2018
Time: 10am PDT | 1pm EDT | 6pm BST
What’s New in Sencha Ext JS 6.6
npm Packages for Ext JS Framework, Components and Themes
The tooling in the JavaScript community is evolving to create web apps on faster timelines, with improved quality and maintainability. The Node Package Manager or npm is a very popular package manager amongst JavaScript developers; npm hosts a huge repository of 700,000 JavaScript based code packages that developers can use in their applications.
With Ext JS 6.6, the Ext JS framework, components and themes are now available as npm packages that are hosted in the npm repository at npm.sencha.com. Ext JS developers can execute simple commands to add a package to their project, manage dependencies, and manage versions of packages being used. They can also easily include 3rd party JavaScript libraries in Ext JS applications.
For example, you can easily add the Ext JS Pivot Grid npm package to your project with following command
npm i –save @sencha/ext-pivot
Similarly, you can add the new Graphite theme to your Ext JS npm Project with following command
npm i –save @sencha/ext-classic-theme-graphite
You will need to authenticate with the Sencha npm registry only one time using following command
npm login –registry=http://npm.sencha.com –[email protected]
ExtGen – New Open tool to generate Ext JS applications
With new Ext JS npm packages, we are creating a new set of powerful open tooling to help you with code generation, build integration and workspace management. ExtGen is a new powerful tool that will help you quickly get started with creating new applications using Ext JS npm packages. ExtGen provides multiple new templates to help you create mobile, desktop, and universal applications. You can also use your own template in creating new Ext JS applications. ExtGen is a node based cross-platform command line tool that provides multiple modes for application generation. It provides auto mode for quickly scaffolding applications using default configuration options. It also provides an interactive mode where you will be asked a series of questions and the application will be generated based on those answers. The generated application will use the webpack development server so that any changes to the app will be immediately reflected in the browser.
You can install ExtGen with following command:
npm install -g @sencha/ext-gen
With ExtGen, you can generate an entire Ext JS application using npm packages with just one command:
ext-gen app -a
You can use of one several options to customize app generation. For example, following command generates a modern app:
ext-gen app -t moderndesktop -n ModernApp
Modern App built using template
ExtBuild – New Open tool to build Ext JS applications
ExtBuild is a new node based tool to build Ext JS applications. ExtBuild currently uses Sencha Cmd and Google Closure compiler for building and transpiling Ext JS applications. The applications generated using open tooling will use ExtBuild to build a development or production version of an Ext JS application.
For example, you can generate a modern app using the following command and it will generate an app with the build profiles as follows:
ext-gen app -t moderndesktop -n ModernApp
“builds”: {
“desktop”: {
“toolkit”: “modern”,
“theme”: “theme-material”,
}
}
With open tooling, you still have backward compatibility to run Sencha Cmd. NPX is an npm package runner that allows you to invoke Sencha Cmd binaries within your application workspace.
For example, the following command will directly use Sencha Cmd to build the application:
npx sencha app build desktop
New Modern Components – Time Panel and Time Field
Time Panel
Time Panel is a new modern component that provides a very easy way of selecting time using the analog clock face. The time panel component is supported on desktop, tablets, as well as iOS and Android devices. The component will automatically advance to minutes after selecting an hour value. There are multiple configuration options to set the alignment and mode of the analog clock. Time panel will reposition the time header based on the orientation of the device.
Time Panel when the device is in landscape orientation
Time Field
Time Field is a new modern component that provides a time input field with automatic time validation. The time field recognizes and uses JavaScript Date objects to validate the input. The component supports multiple time formats and the default depends on the chosen locale. Time field can use time picker to provide an easy way to select time.
Time Field with Time Panel
Localization for Ext JS Modern applications
Communicating with users in a language that they understand and with conventions that they’re used to is vital. Ext JS Modern now includes localization support that helps developers easily localize applications for many non-English languages. Ext JS 6.6 adds support for German, Italian, French, Spanish and Portuguese languages. The locale package contains all the bundled locale files in the override folder. The locale overrides tell Ext JS to replace the default English values of certain components for date formats, month, day names etc.
Here’s an example of an application’s app.json to support the French language:
“requires”: [
…,
“ext-locale”
],
“locale”:”fr”,
For an npm created application, you will also need to import ext-modern-locale package:
npm i –save @sencha/ext-modern-locale
Kitchensink example with Grid component menu in French
Graphite – New beautiful accessible theme
Ext JS 6.6 provides a new beautiful graphite theme that makes your accessible apps visually stunning. The Graphite theme is an accessible high-contrast theme and is designed to make applications that are easier for visually impaired users to view. The Graphite theme inherits from the Triton theme which is a flat, minimalist, imageless theme. The Graphite theme can be used out of the box for your applications or can be extended to create a customized look and feel. The colors, fonts and paddings of the Graphite theme are designed to ensure WCAG 2.0 accessibility guidelines.
Grid with Graphite theme
Pivot Grid using Graphite theme
Dynamic Styling using Material Theme
For many web applications, it is useful to see how changing themes transform the look and feel of applications quickly. Ext JS material theme supports CSS variables, and provides APIs to get and set colors. It is now possible for you to make a color picker with only verified material colors. You can live update the look and feel of your application without the need of an external server or Sencha Cmd.
The material theme provides APIs to get colors that give you a nested object with all the material colors and weights.
Ext.theme.Material.getColors()
The material theme provides you with APIs to set colors that can be used as follows:
Ext.theme.Material.setColors({
‘darkMode’: darkMode,
‘base’: base || me._materialBaseColor,
‘accent’: accent || me._materialAccentColor
});
To illustrate this powerful capability, we have added a color palette in Modern Kitchensink that will allow you to quickly change the kitchensink look and feel to dark mode and apply different base/accent color combinations.
Kitchensink application with dynamic styling
Advanced Application Routing
Ext JS provides routing capabilities which includes the ability to track the application state through the use of the browser history stack. Routing also allows for deep linking into the application which allows a direct link to a specific part of your application. This is very useful for users so they can bookmark your app and even send links to someone else to gain direct access to that part of the application.
Ext JS 6.6 provides a number of advanced routing features that include route “exit” that runs when navigating away, supporting named parameters with optional type specifiers in routes, and routes that disconnect after the first use. Here’s an example of a wildcard route:
routes : {
‘*’ : ‘onRoute’,
‘foo’ : ‘onFoo’
}
routes : {
‘*’ : {
before : ‘onBeforeRoute’,
exit : ‘onExit’,
action : ‘onRoute’
},
‘foo’ : ‘onFoo’
}
Enhanced Gauges components with Needles
Gauges components are very useful to show interval values. With Ext JS 6.6, Gauges are enhanced for both modern and classic applications and now support the ability to enhance gauges with various needle types. The common needle type uses in applications are wedge, diamond, spike, and arrow.
Gauges with different kinds of needles
Gauge components can also provide custom needles as shown in the example below:
Gauge with custom needle
More Features and Performance Improvements
Ext JS 6.6 includes material design changes to multiple components, enhancements to Charts, Data package, Forms, Layouts, Menus, Tree, Calendar, Pivot grid, and Grid. Grid in particular has more than 24+ performance improvements and bug fixes in both modern and classic toolkit. The modern grid now has a better way of handing selection events and classic grid has improvements in store bindings. You will also see much improved performance with Ext JS 6.6 as iOS native app when bundled with Cordova. Ext JS 6.6 has gone through extensive testing phases including automated testing with Sencha Test with more than 5000 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 great apps with Ext JS 6.6 and open tooling and look forward to reading your feedback in the Ext JS forum. You can also find some early feedback from our Beta program participants here.
What's your reaction?
0
0
Will 6.6 be made available for GPL projects?
Hi Chris, We are still evaluating the best approach to make Ext JS even more available to new developers and hobbyist, so stay tuned.
^^^ This view is a fundamental problem and why Sencha is failing as a framework (but it doesn’t need to!)
The GPL releases ARE NOT an approach to new developers and hobbyists.
I rely on the GPL releases. I am not a new developer or a hobbyist. I’ve been working with Sencha possibly longer than anyone still at the company has: https://www.sencha.com/blog/sencha-touch-and-ext-js-spotlight-jarvus-innovations/
I manage open-source projects that use ExtJS. Like, actual open-source project, that can only use a compatible licensed library. Not hobby projects, not a prototype for work that will grow into something needing a commercial license. I spend all day convincing people to learn your framework to work on my project, doing work to grow your developer pool — that thing you’re starving for. I have to explain to them why anyone would use a framework that’s full of bugs that fixes have been created for but you still have to fix yourself.
A framework ecosystem NEEDS open projects people can learn from, contribute to, study best practices within, that show off what the framework can do. If Sencha is ever going to be successful as a foundational technology the company needs to be purged of this view that the GPL license is just some sort of trial version for the commercial.
Open source projects using the framework are factories for new developers, companies, components, and tools. They are NOT potential customers. They never will be, because you can’t use the commercial framework version in an open source project no matter how many seats you buy.
If you stop making GPL releases, there will be a fork eventually, and you’ll just lose mindshare that would otherwise be doing the hard work improving the framework that you need experts for for free for you.
Sencha’s free path to reversing the decline of developers:
– Embrace the community
– Release every version to GPL via GitHub
– Accept pull requests via GitHub. You already have a community that will fix the hard bugs, improve performance, add components
– Do everything you can to support the developer pool growing. Sponsor open source projects, hackathons, people writing about what they did with it
– Focus on selling the value-add that commercial operations need: on-call support, tools for business users, testing tools, continuity
– Develop a hosted CI->build->test->deploy->monitor->analyze PaaS solution. Because of how consistently ExtJS powers entire applications, no one is in a better position to build an end-to-end platform for online business applications. Sell it to commercial users on a subscription basis, with both cloud and on-premises options. You would become so sticky and make so much more $$$$
If you’re wondering “But how do we make money if you’re using the framework for free on GPL projects”
Great question! Seeing the answer takes zooming out a bit from the transactions and looking at the ecosystem and how it flows as a whole
I’ve onboarded probably a dozen major fortune 100/500/1000 companies onto ExtJS in my career, building applications they’ll use/sell/depend on for years to come. I can’t sell corporate clients on ExtJS anymore, no matter how hard I try, because they’ve come to notice that the developer pool is shrinking rather than growing. They know this is a red flag for any technology they’re going to depend on for years.
The developer pool is shrinking because Sencha has not been a friend to the developer, not given individual developers what they need in order to invest their own time into learning. The technology has a lot to offer, but it costs a lot to learn, and your potential customers are evaluating technologies based on what existing talent they are seeing, not what they could spend money training people in. So it falls on the developer to learn the framework, then go on the market with the skills. A framework that can’t be used in open source projects and only sells 5+ seat licenses is a terrible option for an individual developer to spend their time learning.
The technology is strong though and still relevant. Reverse course on the past mistakes in a big way, send a clear signal to developers that you have a lot to offer and are putting them first. Corporate clients will follow where talent is available and where talent makes recommendations. A negative feedback cycle has been created and it can only be broken with a bold move.
To get developers back, licensing is a big part sure but another big part is what Ext JS currently is. Love it or hate it, developers want to use what’s cool and using new syntaxes and build tools like webpack for code splitting and tree shaking are all cool things (even if you don’t know what it is, buzz words work). Ext JS just isn’t close to what the frontend field of today is. Developers don’t want to use yesterday’s tech, they want tomorrow’s tech and Ext JS is yesterday’s tech (and yes, I said this even while working at Sencha).
So there is major work to be done and quickly because when you loose developers, it’s many times harder to get them back.
Congratulations for this great release!
Thanks Herald for the kind words!
Looks like you works hard there. Thank you Sencha Team!!!
Thanks Arthur, Yes, it was a team effort including several members of Sencha MVP community who provided early feedback on Ext JS 6.6 open tooling.
It’s great to see Idera making progress with Ext development.
Based on the roadmap that Idera published, the following were missed in this release:
– Grid Filtering (Modern)
– Multi-Select (Modern)
– Beta Ext Angular (Modern)
I hope you guys can hit those in next release, as those are very important for the modern framework development.
Still, this release is full of great stuff, and I couldn’t be happier to see ExtJS development back on track!
Hi Ivan, We do plan to release above features in next release. Thanks for being part of Sencha MVP program and for you kind words about the release!
Congrats on the release!
I’m glad you got my router stuff back in! Also love the work on gauge needles that Vitaly did last summer too, that’s really slick! Time field stuff looks like stuff Ross did a while ago too but idk that for sure. I wish other things we had lined up in 6.6 before it got dumped to start over with 6.5.3 made it in like grid locking and filtering in modern.
Not sure I like the blue in the graphite theme. I like everything else about it but just feels like a variable wasn’t set when I look at it.
I was starting to get worried that the Q2 target was going to slip but you got it right under the deadline. Wish there was more stuff in it since it’s been 6 months since 6.5.3 tho, used to a lot more but I understand the situation Sencha is in now with it’s engineering department.
+1
Question about ExtBuild as I’m a little confused by your section on it and asking here because I don’t see any other place (no forum for it, no github repo). You don’t show how to install it or use it. Is it bundled with ext-gen? You show the “npx sencha app build production” but I’m not sure how to get it downloaded or if that’s the appropriate way to use ExtBuild?
Little confused what ExtBuild is using. Is it using Sencha Cmd as you say “ExtBuild currently uses Sencha Cmd and Google Closure compiler for building and transpiling Ext JS applications” or is it something else but you can still use Cmd for backwards compat since you say “With open tooling, you still have backward compatibility to run Sencha Cmd.” Just seems contradictory which has me confused. If it’s using Cmd, you say “open tooling” quite a bit so does that mean you plan on open sourcing Cmd or are you talking about something else?
ExtBuild is intended to be the node replacement for Sencha Cmd, for example, the ExtGen app generation is passed to ExtBuild and it actually uses the template to generate an app – so, for example, ExtGen does not need Sencha Cmd.
But, this being a first release, there are many things that we have not yet implemented in ExtBuild – for example, the ‘sencha app build’ functionality – for that we are currently passing through to Sencha Cmd – in the future we plan on replacing with ExtBuild/node
And yes, ExtBuild can be run stand-alone, just like Sencha Cmd. But we haven’t completely implemented that, so, we have not documented it fully. But, you can try it – run npx ext-build and you will see what I mean…
Thank you for your reply Marc. Kind of disappointed at the announcement of new tooling then. So far it doesn’t come close to what Cmd does even the app generation from what I can tell (because as you pointed out, it’s not implemented enough to document). So basically, it’s just a node wrapper around Cmd but in the future it will move away from Cmd to handle it all itself. Doesn’t sound like it should have been released then right? When ExtReact was released we had a Cmd node wrapper so maybe ExtBuild was created as a new module but it’s not actually new in it’s current form.
We are approaching this a step at a time and the first step was to get out the npm/webpack infrastructure – much like ExtReact. Now that we have this, we can start implementing parts of Sencha Cmd, as needed, to Sencha ExtBuild. We plan on listening to the community for the future of ExtGen and ExtBuild (in fact, we had our MVP’s do an early review and feedback of ExtGen before release) , and I would love your feedback for sure! We are looking to potentially put up a forum section for the Open tooling. In the meantime please email me any thoughts and ideas you have (also anyone else with thoughts and feedback, please email me as well). This being an npm set of packages, it will be much easier to release minor versions of this moving forward
I currently have multiple Ext 6.n apps , that live in a Sencha workspace. They all depend on local Sencha packages that I developed. I ‘require’ my packages in the app.json ‘builds’ section. Listening to you talk, it is not clear to me if this workflow will be supported going forward. I did not see an easy way to email you, so I am posting my question here. Thanks
Very nice release. thanks
Thanks Wemerson for your early feedback on Ext JS 6.6 open tooling.
Congrats on this new release.
Thanks Farshad. Enjoy!
Graphite theme is awesome. Great job!
Thanks Varun. Glad you liked it.
Hi,
congratulations on new release.
I’ve used ExtJS some time ago and I’m considering using it again for one or two projects. I’d like to use GPL version, but there is no information is 6.6 a GPL release or when there will be new GPL release.
Completely underwhelming.
All the “new” stuff was written last year.
There are absolutely no new features in the ExtJS core in this release.
Sadly that seems to be so.
Nice to see you managed to make a release just by the end of the quarter. Routing improvements look good.
BTW, the new modern timefield looks almost exactly like the on lovelyhibabe shared on the forums (forum/showthread.php?469216).
What happened with docs.sencha.com? Down for several hours now…
Awesome release! Keep going with the best JS framework!
Thanks Renato for your kind words!
How many idera employees post ‘congrats’ on this post to promote themself , On the work accomplished by previous people ? (https://www.youtube.com/watch?v=Y-W0CBOGnnI )
I can just congratulate you on the step towards NPM, Ext-JS could get out of her golden tower before she collapses, Keep this way and make this FW accessible to more and more people.
Obviously there not will be a release with GPL licence for the 6.6 version. The main question is if Sencha will continue with the politic and will release ExtJS 7.0 with GPL licence. ??
6.6 GPL and new versione thanks
Congrats, great release.
Release with GPL licence for the 6.6 version. The main question is if Sencha will continue with the politic and will release ExtJS 7.0 with GPL licence. ??
Congrats! Release with GPL licence for the 6.6 version. The main question is if Sencha will continue with the politic and will release ExtJS 7.0 with GPL licence. ??
Thanks for the update on new releases.
Unless I’m missing something, there is a glaring omission from this announcement, and from Ext JS 6.6 documentation: how do I apply my custom theme (generated by Sencha Cmd and modified with updated styles as needed) to a v.6.6 app that uses the NPM motif?
When I try to do so, the build process fails. The build process knows where the stock themes are, but it doesn’t know how to find a custom theme. How do I alter my app.json and/or package.json to apply my custom theme?
No GPL? I just left from Webinar…