What's new in Ext JS 5?

Ext JS 5 introduces a great number of new features, and most of them will be covered in the upcoming chapters when we have a closer look, but for the moment we will briefly mention some of the significant additions in version 5:

• Tablet support and new themes: This has introduced the ability to create apps compatible with touch-screen devices (touch-screen laptops, PCs, and tablets). The Crisp theme is introduced and is based on the Neptune theme. Also, there are new themes for tablet support, which are Neptune touch and Crisp touch.
• New application architecture – MVVM: Adding a new alternative to MVC Sencha called MVVM (which stands for Model-View-ViewModel), this new architecture has data binding and two-way data binding, allowing us to decrease much of the extra code that some of us were doing in past versions. This new architecture introduces:
  • Data binding
  • View controllers
  • View models
• Routing: Routing provides deep linking of application functionality and allows us to perform certain actions or methods in our application by translating the URL. This gives us the ability to control the application state, which means that we can go to a specific part or a direct link to our application. Also, it can handle multiple actions in the URL.
• Responsive configurations: Now we have the ability to set the responsiveConfig property (new property) to some components, which will be a configuration object that represents conditions and criteria on which the configurations set will be applied, if the rule meets these configurations. As an example:

  responsiveConfig: {
      'width > 800': { region: 'west' },
      'width <= 800':{ region: 'north' }
  }

• Data package improvements: Some good changes came in version 5 relating to data handling and data manipulation. These changes allowed developers an easier journey in their projects, and some of the new things are:
  • Common Data (the Ext JS Data class, Ext.Data, is now part of the core package)
  • Many-to-many associations
  • Chained stores
  • Custom field types
• Event system: The event logic was changed, and is now a single listener attached at the very top of the DOM hierarchy. So this means when a DOM element fires an event, it bubbles to the top of the hierarchy before it's handled. So Ext JS intercepts this and checks the relevant listeners you added to the component or store. This reduces the number of interactions on the DOM and also gives us the ability to enable gestures.
• Sencha Charts: Charts can work on both Ext JS and Sencha Touch, and have enhanced performance on tablet devices. Legacy Ext JS 4 charts were converted into a separate package to minimize the conversion/upgrade. In version 5, charts have new features such as:
  • Candlestick and OHLC series
  • Pan, zoom, and crosshair interactions
  • Floating axes
  • Multiple axes
  • SVG and HTML Canvas support
  • Better performance
  • Greater customization
  • Chart themes
• Tab Panels: Tab panels have more options to control configurations such as icon alignment and text rotation. Thanks to new flexible Sass mixins, we can easily control presentation options.
• Grids: This component, which has been present since version 2.x, is one of the most popular components, and we may call it one of the cornerstones of this framework. In version 5, it got some awesome new features:
  • Components in Cells
  • Buffered updates
  • Cell updaters
  • Grid filters (The popular "UX" (user extension) has been rewritten and integrated into the framework. Also filters can be saved in the component state.)
  • Rendering optimizations
• Widgets: This is a lightweight component, which is a middle ground between Ext.Component and the Cell renderer.
• Breadcrumb bars: This new component displays the data of a store (a specific data store for the tree component) in a toolbar form. This new control can be a space saver on small screens or tablets.
• Form package improvements: Ext JS 5 introduces some new controls and significant changes on others:
  • Tagfield: This is a new control to select multiple values.
  • Segmented buttons: These are buttons with presentation such as multiple selections on mobile interfaces.
  • Goodbye to TriggerField: In version 5, TriggerField is deprecated and now the way to create triggers is by using the Text field and implementing the triggers on the TextField configuration. (TriggerField in version 4 is a text field with a configured button(s) on the right side.)

    

  • Field and Form layouts: Layouts were refactored using HTML and CSS, so there is improvement as the performance is now better.
• New SASS Mixins (http://sass-lang.com/): Several components that were not able to be custom-themed now have the ability to be styled in multiple ways in a single theme or application. These components are:
  • Ext.menu.Menu
  • Ext.form.Labelable
  • Ext.form.FieldSet
  • Ext.form.CheckboxGroup
  • Ext.form.field.Text
  • Ext.form.field.Spinner
  • Ext.form.field.Display
  • Ext.form.field.Checkbox
• The Sencha Core package: The core package contains code shared between Ext JS and Sencha Touch and in the future, this core will be part of the next major release of Sencha Touch. The Core includes:
  • Class system
  • Data
  • Events
  • Element
  • Utilities
  • Feature/environment detection