This presentation covers an elementary introduction to Ext Js 5 and its architecture. It also provides the details of new version of Ext Js i.e Ext Js 6. There are few slides which discuss comparison between Ext Js and other UI development frameworks

1. Introduction to Ext JS
Sushil Shinde Sujith Sudhakaran
Sushil.shinde@synerzip.com sujith.sudhakaran@synerzip.com

2. EXT JS | Introduction
 Ext JS is a pure JavaScript web application framework
 Framework to build feature-rich cross-platform web applications targeting
desktops, tablets, and smartphones
 Features hundreds of high-performance UI widgets
 Responsive design and templates
 Object oriented architecture
 Robust data packages
 Packaged with rich customizable themes
 JavaScript driven development

3. EXT JS | Class System
 Ext JS ships with more than 300 classes
 ‘Ext’ is global singleton object with 78 methods and 59 properties
 Ext.Define(‘className’, ‘Class members’, ‘onClassCreatedCallback’ ) : To
define new custom class
 Ext.Create(‘className’) : To create an object of class
 Class can have constructor, private members and static members
 Ext JS supports inheritance : using ‘extend’ keyword

4. EXT JS | Data Package
• The data package is what loads and saves your application data
• Data package classes:
– Ext.data.Model
– Ext.data.Store
– Ext.data.proxy.Proxy

5. EXT JS | Application Architecture
 Ext JS provides support for both MVC and MVVM application architectures
 What is MVC?
 What is MVVM?
 (M) Model: It is a class which defines the fields for their data
 (V) View: Any type of component that is visually represented like panel,
form
 (C) Controller: A class used as a place to maintain view’s logic
 (VM) ViewModel: Is a class which manages data specific to views
 (VC) View Controller: Is a class which creates one-to-one relation between
view and controller

6. EXT JS | MVVM and Data Binding
 Two – way data binding
 Live synchronization between
Views and Models
 Computed values and fields

7. EXT JS | UI Components
 Out of the box components:
 Dialog Boxes
 Tree, Tree grid
 Combo-box, Sliders
 Pickers (Date, Time, Color etc.)
 Menu, Buttons, Toolbar and Tooltips
 Grid
 ….. Many more
 Data Validation and dirty indicators
 Drag and Drop

8. Key takeaways from Sencha Roadshow
• Latest version 6.0
• Theme
• Fashion
• IDE Plugins
• Professional services
• …

9. EXT JS | Comparison
Angular ExtJS

10. New Features in 6.0
• Single framework for creating applications that runs on all
types of devices, from phones to tablets to desktops
• Toolkits as classic and modern
– Classic consists of visual elements from ExtJS
– Modern consists of the visual elements from Touch
• Concept of Universal Apps
• New Theme – Triton
• Fashion
• ExtJS Premium
– Pivot grid
– Exporter Plugin
• Microloader

11. Sample bootstrap.js

12. Changed Architecture

13. Compatibility

15. Sencha Tools

16. IDE Plugins

17. Idea of Styling and Theming
• Comes as a part of branding
the application/company
• To provide consistent look
and feel
• Standardize styles of
components
• Provide alternate look and
feel for the same
application
• We can say it as a after
thought than design
philosophy
• Change the look and feel of
an existing application
• Maintaining the existing
functionality and make it
look different
• Theming • Styling

18. Lastly few things about Sencha charts

19. When to use what
• ExtJS
• You want to use handy components
delivered with Sencha Ext JS. It is a huge
time saver.
• You do not want to worry regarding cross
compatibility issues while Programming
and Development. It is a big plus.
• You or your client need specialized
licensing or an accountable party to call
for support.
• Universal apps, you can achieve
responsiveness by managing the config
files
• If paid support contracts and a per-seat /
per-server commercial license is
affordable.
• Angular
• Smaller Footprint is required
• Responsive design is a requirement for
your application.
• Your organization find value in automated
testing and automated testing is a part of
your development culture.
• It would be cheaper to integrate existing
3rd-party components which are free.
• Your team is comfortable with CSS and
dealing with cross-browser compatibility
issues.
• If the team will be able to manage
integrating new releases and bug fixes
from the selected 3rd-party libraries
throughout the application's development
lifecycle.

20. Sencha Customers

21. Thanks