Embed Size (px)
Citation preview
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
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
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
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
EXT JS | MVVM and Data Binding
Two – way data binding Live synchronization between
Views and Models Computed values and fields
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
Key takeaways from Sencha Roadshow
• Latest version 6.0• Theme• Fashion• IDE Plugins• Professional services• …
EXT JS | Comparison
Angular ExtJS
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
Sample bootstrap.js
Changed Architecture
Compatibility
Sencha Tools
IDE Plugins
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
Lastly few things about Sencha charts
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.
Sencha Customers
Thanks
