Introduction to ExtJS and its new features - Presented by Sushi Shinde and Sujith Sudhakaran, Synerzip

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