Countdown to Ext JS 4: Developer Preview
With Ext JS 4 we’ve been driven by three key goals: speed, robustness and ease of use. We wanted the framework to be as fast and as robust as possible on every browser, and to be easy to learn and use. To achieve this we took the whole framework back to the drawing board, and what we’ve come back with is the fastest, most bullet-proof version of Ext JS we’ve ever created. Best of all, we’ve managed to do it while staying true to the core experience of writing apps “the Ext JS way.”
Today’s preview release (and examples) contains almost all of the components that will ship in the final version. We’ve kept a couple back to give them some extra polish, notably Tree and Accordion. We’ve also ported the default Blue Theme from Ext JS 3 — a task that was made easy by the brand new SASS-based theming system. There’s so much to cover that we can’t hope to fit it all into a single blog post so we’ll continue our countdown to Ext JS 4 series over the coming weeks.
Ext JS 4 Developer Preview is available to download today. Download Now
A Framework you already know
Firstly, Ext JS 4 is completely sandboxed; there is no more native object augmentation or reliance on global variables. This means you can run Ext JS 4 alongside Ext JS 3 on the same page. To demonstrate this we’ve taken the best of both versions and combined them in a single page. We’ve used the Desktop example from Ext JS 3 and loaded Ext JS 4’s brand new charts alongside as if they were part of Desktop itself – check it out for yourself.
The second step is to provide as strong a legacy layer as possible to help you upgrade your Ext JS 3.x applications. We’re starting that today with the release of a detailed overview guide to the differences between the versions, and will update this as we continue our rollout. In addition to the guide we will be providing a legacy file that can be dropped in to an Ext JS 3.x application to help you upgrade your app. We’ll be expanding on both of these in another post very soon.
Awesome New Features
Last week we unveiled Ext JS 4’s brand new drawing and charting package. The reception it got was unbelievable and we know it’s one of the most anticipated parts of Ext JS 4. For those who didn’t see the original announcement, Ext JS 4 draws gorgeous charts using SVG, Canvas and VML — with no need for any plugins. The charting system is integrated with the new data package and fully animated in every browser.
The data package is what loads and saves all of the data in your application, and it saw a massive upgrade for version 4. With the new Model class, it’s easy to handle almost any kind of data on the client side. Validations are performed at the Model level and the new Associations API makes it possible to set up relationships between your models.
The expanded Proxy class can now be used directly on a Model, meaning you can load and save data without the need for a Store, and the new localStorage Proxy enables you to save data on the client with a single line of code. Multiple sorting, filtering and grouping is now all possible on the client side, and the new Readers even understand nested data sets. The data package underpins most of the components in the framework, and we’ve written extensively about it in recent posts:
The grid is one of the centerpieces of Ext JS. It’s an incredibly versatile component that provides a great way to view lots of data at once, formatted exactly how you need it. With Ext JS 4 we have overhauled the grid, making it faster, lighter and easier to customize.
We started by drastically reducing the HTML markup for the grid. In previous versions the grid would always render markup that was capable of handling all of the customizations applied to it: row expansion, editors, column locking and all the rest. With version 4, the grid is smarter and only renders the markup it needs based on the features you enable. In most cases this results in 20% less markup generated in Ext JS 4 than in Ext JS 3, which brings tremendous performance benefits. In fact, the grid is so fast that it actually outperforms the (now deprecated) 3.x ListView.
There’s a lot more to talk about with the grid, and we’ll have a full post about it shortly, but the last thing to mention is that Tree now extends from Grid. This not only reduces the size of the framework, it also makes it extremely easy to customize Trees the same way we can customize Grid. We’re just putting the finishing touches on the new Tree class and expect to ship it to you in the next release.
Along with Grids, Forms are used in almost every Ext JS application. In version 3 we were a little constrained by the FormLayout, which made it difficult to get a form looking just right. Ext JS 4 removes the need for FormLayout altogether, enabling you to use any layout imaginable with your forms. Forms are also no longer tied to the DOM, making it easier than ever to have forms spanning multiple tabs without problems.
With the addition of the new FieldLayout, any component can be placed into a form and given a label and even error messages. Because the definition of a Field has been moved into a Mixin (see our blog posts on Ext JS’s new class system), you can add a grid, tree or other component into a form and use it as a multi select. There are a number of examples showing off the new form capabilities in this release.
The layout system is one of the most powerful parts of Ext JS. It handles the sizing and positioning of every component in your application and keeps everything in the right place while your user gets their work done. Ext JS 2 had fast layouts, but they weren’t as flexible as we knew they could be. With Ext JS 3 layouts became a lot more flexible with new box layouts, but we gained that flexibility at the cost of some performance.
In Ext JS 4 we have the best of both worlds — better performance and more flexibility — as well as brand new layouts like DockLayout. We’ll have a blog post explaining all the upgrade shortly but in the meantime be sure to watch Jamie’s talk on Ext JS 4 Layouts at SenchaCon 2010.
- ARIA Support. All components are marked up with ARIA attributes to allow screen readers to understand the page.
- Focus Manager. Enables keyboard-driven navigation around any app.
- High Contrast Theme. Light text on a dark background is easier to read for users with vision problems.
Accessibility and RTL support are both very important to us and will feature heavily in upcoming releases. For today we’ve focused on shipping as many components as possible.
One of the biggest requests we get is to make it easier to theme applications. With Ext JS 4 we’ve built on our experience with Sencha Touch to make the framework more themable than ever before by unlocking the power of SASS and Compass. Every aspect of the framework’s appearance can be customized, often by simply tweaking a color variable.
If you haven’t seen the power and flexibility that SASS and Compass bring be sure to check out Dave Kaneda’s post on theming Sencha Touch. We’ll be revisiting the subject soon with a full post on theming Ext JS 4, but if you can’t wait I highly recommend checking out Rob Dougan’s talk on theming at SenchaCon 2010.
The Road to Ext JS 4.0
Today’s release is the first of several before we hit Ext JS 4.0 Final. We expect to ship new releases roughly every week for the next several weeks, with the first beta release hitting your screens about two weeks from now. Ext JS 4 has been a long time coming and I hope you’re as excited as we are about the changes coming to the framework. Check out all of the examples and tell us what you think in the comments!