SlideShare une entreprise Scribd logo
1  sur  21
Télécharger pour lire hors ligne
Introduction to Ext JS
Sushil Shinde Sujith Sudhakaran
Sushil.shinde@synerzip.com sujith.sudhakaran@synerzip.com
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
Ext Js introduction and new features in Ext Js 6
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

Contenu connexe

Tendances

Client-side JavaScript
Client-side JavaScriptClient-side JavaScript
Client-side JavaScriptLilia Sfaxi
 
AngularJS: Overview & Key Features
AngularJS: Overview & Key FeaturesAngularJS: Overview & Key Features
AngularJS: Overview & Key FeaturesMohamad Al Asmar
 
Test Data Builder Pattern
Test Data Builder PatternTest Data Builder Pattern
Test Data Builder PatternAlan Parkinson
 
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark BrocatoSenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark BrocatoSencha
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginnersMunir Hoque
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introductionLuigi De Russis
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - IntroductionSagar Acharya
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners WorkshopSathish VJ
 
Ajax toolkit-framework
Ajax toolkit-frameworkAjax toolkit-framework
Ajax toolkit-frameworkWBUTTUTORIALS
 
Creating data with the test data builder pattern
Creating data with the test data builder patternCreating data with the test data builder pattern
Creating data with the test data builder patternAlan Parkinson
 
Front end development with Angular JS
Front end development with Angular JSFront end development with Angular JS
Front end development with Angular JSBipin
 
Persistence on iOS
Persistence on iOSPersistence on iOS
Persistence on iOSMake School
 
Fine-tuning the DITA customization
Fine-tuning the DITA customizationFine-tuning the DITA customization
Fine-tuning the DITA customizationXMetaL
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular jsAayush Shrestha
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseEPAM Systems
 
Design Patterns in iOS
Design Patterns in iOSDesign Patterns in iOS
Design Patterns in iOSYi-Shou Chen
 

Tendances (20)

Client-side JavaScript
Client-side JavaScriptClient-side JavaScript
Client-side JavaScript
 
AngularJS: Overview & Key Features
AngularJS: Overview & Key FeaturesAngularJS: Overview & Key Features
AngularJS: Overview & Key Features
 
Test Data Builder Pattern
Test Data Builder PatternTest Data Builder Pattern
Test Data Builder Pattern
 
5 angularjs features
5 angularjs features5 angularjs features
5 angularjs features
 
The AngularJS way
The AngularJS wayThe AngularJS way
The AngularJS way
 
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark BrocatoSenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginners
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introduction
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
 
Ajax toolkit-framework
Ajax toolkit-frameworkAjax toolkit-framework
Ajax toolkit-framework
 
Creating data with the test data builder pattern
Creating data with the test data builder patternCreating data with the test data builder pattern
Creating data with the test data builder pattern
 
Front end development with Angular JS
Front end development with Angular JSFront end development with Angular JS
Front end development with Angular JS
 
Persistence on iOS
Persistence on iOSPersistence on iOS
Persistence on iOS
 
Angular js
Angular jsAngular js
Angular js
 
Fine-tuning the DITA customization
Fine-tuning the DITA customizationFine-tuning the DITA customization
Fine-tuning the DITA customization
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
 
Ember js getting started
Ember js getting startedEmber js getting started
Ember js getting started
 
Design Patterns in iOS
Design Patterns in iOSDesign Patterns in iOS
Design Patterns in iOS
 

Similaire à Ext Js introduction and new features in Ext Js 6

Building Rich Internet Applications with Ext JS
Building Rich Internet Applications  with Ext JSBuilding Rich Internet Applications  with Ext JS
Building Rich Internet Applications with Ext JSMats Bryntse
 
Sencha Products - Coderage Conference
Sencha Products - Coderage ConferenceSencha Products - Coderage Conference
Sencha Products - Coderage ConferenceSandeep Adwankar
 
Innovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and FrameworkInnovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and FrameworkSandeep Adwankar
 
Microsoft Entity Framework
Microsoft Entity FrameworkMicrosoft Entity Framework
Microsoft Entity FrameworkMahmoud Tolba
 
Workshop Android for Java Developers
Workshop Android for Java DevelopersWorkshop Android for Java Developers
Workshop Android for Java Developersmhant
 
IncQuery Group's presentation for the INCOSE Polish Chapter 20220310
IncQuery Group's presentation for the INCOSE Polish Chapter 20220310IncQuery Group's presentation for the INCOSE Polish Chapter 20220310
IncQuery Group's presentation for the INCOSE Polish Chapter 20220310IncQuery Labs
 
Entity Framework Core 1.0
Entity Framework Core 1.0Entity Framework Core 1.0
Entity Framework Core 1.0Senthil Kumar
 
Development Practices & The Microsoft Approach
Development Practices & The Microsoft ApproachDevelopment Practices & The Microsoft Approach
Development Practices & The Microsoft ApproachSteve Lange
 
Struts validation framework - Part1 [null Bangalore] [Dec 2013 meet]
Struts validation framework - Part1 [null Bangalore] [Dec 2013 meet]Struts validation framework - Part1 [null Bangalore] [Dec 2013 meet]
Struts validation framework - Part1 [null Bangalore] [Dec 2013 meet]n|u - The Open Security Community
 
Tecnologias Free e Open Source na Plataforma Microsoft
Tecnologias Free e Open Source na Plataforma MicrosoftTecnologias Free e Open Source na Plataforma Microsoft
Tecnologias Free e Open Source na Plataforma MicrosoftGustavo Malheiros
 
201908 Overview of Automated ML
201908 Overview of Automated ML201908 Overview of Automated ML
201908 Overview of Automated MLMark Tabladillo
 
Ext JS Upgrade Adviser EA Launch
Ext JS Upgrade Adviser EA LaunchExt JS Upgrade Adviser EA Launch
Ext JS Upgrade Adviser EA LaunchSandeep Adwankar
 
Azure Manage Apps - The Full Story.pdf
Azure Manage Apps - The Full Story.pdfAzure Manage Apps - The Full Story.pdf
Azure Manage Apps - The Full Story.pdfAMISHRA21
 

Similaire à Ext Js introduction and new features in Ext Js 6 (20)

Building Rich Internet Applications with Ext JS
Building Rich Internet Applications  with Ext JSBuilding Rich Internet Applications  with Ext JS
Building Rich Internet Applications with Ext JS
 
Sencha Products - Coderage Conference
Sencha Products - Coderage ConferenceSencha Products - Coderage Conference
Sencha Products - Coderage Conference
 
Innovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and FrameworkInnovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and Framework
 
Chinnasamy Manickam
Chinnasamy ManickamChinnasamy Manickam
Chinnasamy Manickam
 
Microsoft Entity Framework
Microsoft Entity FrameworkMicrosoft Entity Framework
Microsoft Entity Framework
 
Workshop Android for Java Developers
Workshop Android for Java DevelopersWorkshop Android for Java Developers
Workshop Android for Java Developers
 
IncQuery Group's presentation for the INCOSE Polish Chapter 20220310
IncQuery Group's presentation for the INCOSE Polish Chapter 20220310IncQuery Group's presentation for the INCOSE Polish Chapter 20220310
IncQuery Group's presentation for the INCOSE Polish Chapter 20220310
 
Entity Framework Core 1.0
Entity Framework Core 1.0Entity Framework Core 1.0
Entity Framework Core 1.0
 
Profile_Ahmad2
Profile_Ahmad2Profile_Ahmad2
Profile_Ahmad2
 
Prashant Patel
Prashant PatelPrashant Patel
Prashant Patel
 
Development Practices & The Microsoft Approach
Development Practices & The Microsoft ApproachDevelopment Practices & The Microsoft Approach
Development Practices & The Microsoft Approach
 
Sathish-Resume
Sathish-ResumeSathish-Resume
Sathish-Resume
 
Design patterns
Design patternsDesign patterns
Design patterns
 
Struts validation framework - Part1 [null Bangalore] [Dec 2013 meet]
Struts validation framework - Part1 [null Bangalore] [Dec 2013 meet]Struts validation framework - Part1 [null Bangalore] [Dec 2013 meet]
Struts validation framework - Part1 [null Bangalore] [Dec 2013 meet]
 
Tecnologias Free e Open Source na Plataforma Microsoft
Tecnologias Free e Open Source na Plataforma MicrosoftTecnologias Free e Open Source na Plataforma Microsoft
Tecnologias Free e Open Source na Plataforma Microsoft
 
201908 Overview of Automated ML
201908 Overview of Automated ML201908 Overview of Automated ML
201908 Overview of Automated ML
 
Vsts intro
Vsts introVsts intro
Vsts intro
 
Ext JS Upgrade Adviser EA Launch
Ext JS Upgrade Adviser EA LaunchExt JS Upgrade Adviser EA Launch
Ext JS Upgrade Adviser EA Launch
 
Azure Manage Apps - The Full Story.pdf
Azure Manage Apps - The Full Story.pdfAzure Manage Apps - The Full Story.pdf
Azure Manage Apps - The Full Story.pdf
 
Sky High With Azure
Sky High With AzureSky High With Azure
Sky High With Azure
 

Dernier

Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 

Dernier (20)

Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 

Ext Js introduction and new features in Ext Js 6

  • 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
  • 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.

Notes de l'éditeur

  1. Thank Sushil Where it took place, first time event in India, Bangalore, Delhi and Mumbai Info about the slides What I will be talking in my session Sass(Syntactically Awesome Stylesheets) the scripts are interpreted into CSS
  2. After understanding what ExtJS has to offer Explain about the comparison with context to sushil’s explanation Because Extjs has so many things to offer in itself.
  3. Triton: new theme, which is flat, no images, they use font icons Fashion used for developing themes, is a compiler for sass files used to generate CSS, inject the css into the running page and so you can see the changes nearly in real time Concept of bufferedRenderer, bufferedStore Show the demo
  4. It is a huge file, in our case the file is of 1661 lines
  5. From 4 they planned to merge the two framework
  6. Check on netmarketshare.com: 44% market still uses Internet explorer, one or the other version 46% market uses chrome Firefox, safari form the remaining %
  7. Talk about the universal app, different type, modern and classic
  8. Sencha Architect saves developers time by removing the need to type most boilerplate code. Automatic code generation accelerates the development of both desktop and mobile applications. Test studio check --? Architect – Q1 or Q2
  9. Which all ide plugins are available
  10. Example of halloween Adding the cherry on the icing
  11. Chartsly package by one of the speaker at the conference
  12. So, that all from our side, I hope this was useful and informative to you guys ExtJS is the extensively documented JS library