Ext.js - Ext JS Discussion

New added features of advance versions of Ext JS

Ext JS 5

1. MVVM architecture: In Ext JS 5 the controller of MVC architecture is replaced by a viewmodel which is a model specific to view. This view model is basically used for binding data between model and different views. So with the help of this multiway binding is possible in Ext JS which was one of the shortcoming of this library.
2. Minimal modification for touch screen: Ext JS 5 has such functionality that the desktop application can be made to work on a tablet or a touch screen PC with minimal modifications.
3. Compatibility with Ext 4: It is completely compatible with Ext JS 4 or prior versions ans still supports MVC architecture so that the applications which are using Ext JS prior can still upgrade it to 5 and can continue with the existing code.
4. Themes: Ext JS 5 has included new themes:
• Neptune Touch:It had look and feel as basic Neptune theme with touch centric functionalities, such that theme should work properly for tappable elements also without any UI distortion.
• Crisp: This is similar to Neptune touch functionally but has different look and feel such as different colors, icons etc.
5. View specific controller: Ext JS 5 is using viewmodel functionality but still we can have a controller which is also specific to a particular view, so now we do not have a global controller like we had in the previous versions but a controller which is associated with a specific view instance. View controller wire up the events in simplified manner so there is no worry of memory leak.
   
6. Formulas in view model: Introduction of formulas in model has made it logically easy. Formula in models is like creation of particular data with the other data. In previous versions of Ext JS we were doing the same in renderer in grid column.
7. Responsive config: In Ext JS 5 we have configs which are responsive as in the config value is applicable only when some rule is true.

   ResponsiveConfig {
      'width <1000':{
         region: 'east'
      }, 
      'width >1000':{
         region: 'west'
      }
   }

8. New widgets:New charts which work for both Ext JS and sencha touch , in tabpanel icon alignment, text rotation new features added, addition of Breadcrumb bars etc.
9. Sparkline in grid: Now in Ext Js 5 we can have charts in grid column
10. Multiway filtering, sorting:In Ext JS 5 multiway filtering and sorting is added, now we can choose multiple filters to filteration.

Ext JS 6

It is a single framework for creating application which can work across all type of devices such as phone, tablet, desktop, laptop etc.
It is merger of EXT JS and Sencha Touch.
It can be added as:
"toolkit": "classic", // or "modern"
If toolkit is classic it includes Ext JS desktop application framework.
And if toolkit is modern then it includes sencha touch mobile application framework.
Toolkit is a visual package which is different for different type but their base is common, which is common core like common APIs for both the toolkits.
If upgradation is form Sencha touch instead of Ext JS then it has extensive benefits such all mouse events will seamlessly work with this.
New theme “Triton” is include which puts more focus on content instead of decoration such as rounded corner or dashed lines. This new theme uses font awesome toolkit.
Font awesome is a toolkit which works best with bootstrap and has extensive number of icons and whose size can be increased or decreased very easily based on the css class used.
Font awesome can be used with <i> tag and class property as:
<i class="fa fa-camera-retro fa-lg">
Both the toolkits have different sizing components available such as classic has normal size which is good for desktop applications where as modern has x-time more as it can get stretched while zooming screen.
New compiler Fashion is added for building .scss files. Sencha cmd with phantom js can use fashion easily to build .scss files.
Ext JS 6 gives functionality of using promises implementation. Promises represents the result of async operation, to make code unblock able. It takes care of all the error occur while callback or before that.
Classic grid has functionality of spreadsheet model of grid which can extend data of current selection by dragging it either horizontally or vertically.
It provides responsive column model which works more or less same as responsive config added in ExtJS 5. E.g based on the rules it can be decided which css class to use which is helpful for different device types.
3D charts are included in this version of Ext JS which supports many other cool features such as labels, legends, highlighted, tooltip and configurable 3D effects.

Browser Support in Ext JS 6

Modern Toolkit
Desktop

• IE11+
• Firefox and Firefox ESR (Latest 2 Versions)
• Chrome (Latest 2 Versions)
• Safari 7+

Mobile

• IE11+
• Android 4.0+ Chrome
• Android 4.4+ Native
• Safari 7+

Classic Toolkit
Desktop

• IE8+ (Strict DOCTYPE)
• Firefox and Firefox ESR (Latest 2 Versions)
• Chrome (Latest 2 Versions)
• Safari 7+
• Opera (Latest 2 Versions)

Tablet

• Windows 8 Touch Screen - IE10+
• Android 4.0+ Chrome
• Android 4.4+ Native
• Safari 7+