Introducing Ext JS 4.2

Ext JS 4.2 contains many exciting enhancements and features. You may have read about some of these in previous posts, such as the improvements to the Grid component. In this article, we’ll take a tour of the new Neptune Theme and Right-to-Left (RTL) support.

Neptune

With Ext JS 4.2, we are excited to welcome “Neptune” to the family as an official, fully supported theme. Building applications that have a modern, contemporary look has always been incredibly important for application developers and with the new Neptune theme, Ext JS now supports four core themes out of the box: Neptune, Classic, Gray and Accessibility.

Neptune gives your application a clean, modern and lighter look by minimizing unnecessary visual elements such as borders and increased padding in many places to make the overall interface feel more relaxed and open.

Our goal for Neptune is far more than just providing a new and pretty face. We want to enable you to create the best application experience easily and on as many browsers as possible. To support this, we have made some significant advances in how we do theming that will make it easier to customize and share themes.

Flexibility

The key to creating the best applications is easy customization. Making changes has to be as simple as possible, because when it comes to themes: one size never fits all.

To make the Ext JS themes as flexible as possible, we’ve greatly expanded the use of Sass variables. The variables are chained together, so variables calculate their default values from other variables, and whenever possible, changes (such as setting the “$base-color”) propagate as you would expect.

Theme Packages

Sencha Cmd 3.1 adds support for “packages”: self-contained bundles of code, styling and resources. Neptune and the other Ext JS 4.2 themes are now delivered as theme Packages which enables many exciting possibilities.

In general, packages allow you to easily share code between your applications as well as with other developers. Sharing JavaScript classes is something that the Ext JS loader and previous versions of Sencha Cmd handled very well, but now, with packages, Sencha Cmd can connect the world of JavaScript classes to the world of Sass.

Internally, Ext JS leverages the Sencha Cmd ability to relate JavaScript and Sass to build its themes. That is, Cmd produces the “all.scss” and ultimately “all.css” that we ship with Ext JS. This build process ensures that the individual SCSS files defining Sass variables and rules are always in the right order based on the JavaScript class hierarchy. This allows us to share Sass logic between the various themes as easily as we do JavaScript classes.

Of course, these Sencha Cmd features are not limited to building Ext JS. If you use Cmd to build the “all-classes.js” file containing a concatenation and compression of all your JavaScript, you can extend this to build your application’s Sass. If you do, you gain another exciting first: your CSS file will contain only the CSS needed for the components you are actually using. This also works for views you define, so your application can organize its Sass as a mirror image of its JavaScript — a huge help as your application grows over time.

In the same way we improved user experience by not downloading lots of unused JavaScript, removing unused CSS can also be a big help. This is even more true of CSS because unnecessary rules are not so easily ignored by the browser. Some browsers also have limits on the number of rules you can have in your CSS file. Going forward, this will be increasingly important as new components are added and new features (like RTL) are added that span all components.

Custom Themes

Themes are special types of package that have one important, additional feature: themes can “extend” other themes. This capability is used by Ext JS 4.2 to create its theme hierarchy:

The build process for theme packages has an extra step that allows a theme to inherit any of the resources of its base(s) or elect to replace them with a version of its own. Also, for IE compatibility, the image “slicer” is automatically invoked to transform your CSS3 border radius and linear gradient styles into background images.

All of this allows you to create new themes by adding only what you want to change (style rules, JavaScript code or static resources like images). There is no need to “copy and paste” anything from your base theme. This ensures that your themes will inherit bug fixes and other enhancements as we maintain the core themes.

You can learn a lot more about this process in the Theme Guide found here and about packages in general in the package guides http://docs.sencha.com/ext-js/4-2/#!/guide/command_packages and http://docs.sencha.com/ext-js/4-2/#!/guide/command_package_authoring.

RTL

The support for Right-to-Left languages (such as Hebrew and Arabic) has been a long-requested feature, so we are delighted to say that RTL is now here. We are equally happy to say that if you don’t need RTL support and do not enable it, there is only a minimal amount of additional code added to the core of the framework.

The first step to enabling RTL is to require the “Ext.rtl.*” namespace. This namespace contains many overrides that look like this:

Ext.define(‘Ext.rtl.button.Button’, {
override: Ext.button.Button’,
…

This family of overrides takes over key positioning methods on various classes in the framework and adds the necessary RTL checks and logic.

The second step once you have the supporting code injected into the framework is to set the “rtl” config on the containers you want — such as the viewport:

Ext.define(‘MyApp.views.Viewport’, {
extend: Ext.container.Viewport’,
requires: [
‘Ext.rtl.*’
],
rtl: true,
…

RTL in Sass

On the CSS side, RTL support is enabled by setting this Sass variable:

$include-rtl: true;

This will add the CSS rules for RTL using the “.x-rtl” selector.

Mixing LTR and RTL

The “rtl” config is inherited down the Component hierarchy. By setting it on the Viewport, you are effectively setting RTL globally. This setting can be enabled at a lower level or changed back by setting “rtl: false” which is then inherited from that level down.

Due to CSS limitations in IE6 and IE/Quirks, nesting is not supported. Loading the CSS with RTL support must only be done when RTL is desired globally on these browsers.

Locales

To streamline this process for your applications, Sencha Cmd supports a package type of “locale”. Ext JS 4.2 now provides its locale support in this form, so your applications can simply require the appropriate locale package. The JavaScript needed will automatically be included and the include-rtl Sass variable set accordingly. Using this approach, you can produce an optimized JavaScript/CSS build for each locale.

Performance

This article would be incomplete if I did not say a few words about performance in Ext JS 4.2 compared to Ext JS 4.1 and 4.0. While the majority of performance improvement work has been in relation to grid, several other changes were made largely for performance reasons.

These changes ranged from removing the CSS reset (its numerous “expensive” rules to reset, scope reset and unreset), to moving logic out of JavaScript to handle “framed” components (such as buttons), to simplifying the button component markup and its corresponding component layout logic.

In the previous article, I compared Ext JS 4.0.7 to Ext JS 4.1 using the Themes example. Since then, a good friend in the community submitted an example application mimicking his own that is definitely a better, real-world test than Themes. I have put the probes to that example on the same IE8 / Windows 7 laptop and here are the results.

The breakdown of performance by category in Ext JS 4.2 now looks like the chart below. The numbers from previous versions are “scratched out” to show the progression from 4.0.7 to 4.1.1 to current 4.2.0.

Performance is never done, and we will continue to look for ways to increase performance. If you want to read more about all the work we did on Grid and the new bufferedrenderer plugin, check out the original blog post here.

The Smaller Bits

There are lots of little improvements here and there. For more details on these, consult the Upgrade Guide.

Grid/Tree

There are several new examples that show how you can now combine many features which previously did not work together. Perhaps one of the most interesting is the locking TreeGrid.

The bufferedrenderer plugin also works on trees so you can now handle much larger trees (or tree grids) than before. To see a locking, buffered rendered TreeGrid, check out the example.

Check out all of the examples.

Tabs

Tabs can now go vertical. You can see them rotated and docked on the left or right in the new Side Tabs example

Glyphs

Many folks want to use web fonts to add scalable, cross-browser images to their application. To support this, we have added the “glyph” config which is very similar to “icon” and “iconCls”. You just set the “glyph” config to be the code point and the necessary text will be rendered into the component:

{
xtype: ‘button’,
glyph: 42
}

This is supported for buttons, tabs, panel headers and menu items. You can see this in action in the new Kitchen Sink example.

MVC

The introduction of Event Domains allows your Controller to respond to events fired by things like Stores or other Controllers.

Here’s what the code looks like:

this.listen({
controller: {
‘*’: { // any controller
foo: ‘onFoo’ // method names are now supported!
}
},
store: {
‘#storeId’: {
remove: ‘onStoreRemove’
}
},
component: { // same as this.control()
}

});

XTemplate

You can now iterate objects more easily in your templates:

{$} {.}

The “{$}” expands as the property name and “{.}” is the property value.

Conclusion

Creating compelling, modern applications is hard work. Making them look awesome, run fast, and be delightful to use is even harder. With Neptune, RTL, the new grid improvements, enhancements to Cmd and all the various new features in Ext JS 4.2, delivering amazing experiences to your users has never been easier!