SlideShare a Scribd company logo
Presenter: Gourav Singh, Mindfire Solutions
Date: 04/05/2015
Basic of Ext JS
Framework
Presenter: Gourav Singh, Mindfire Solutions
Agenda
 Why Ext JS?
 Overview of Ext JS API
 Themes and Styling in Ext JS
 Understanding Ext JS API
 Ext JS Component Lifecycle
 Ext JS Components and Events
 Ext JS Layouts
Presenter: Gourav Singh, Mindfire Solutions
Why Ext JS?
 Object-Oriented flavor
 Rich UI controls
 Support for HTML 5
 MVC architecture
 Themes and Styling
 Documentation
 Moving to the mobile version
Presenter: Gourav Singh, Mindfire Solutions
Overview of Ext JS Framework
 The resources folder contains the standard set of
themes that you can use in your application.
 The src folder contains the entire API organized into
numerous JavaScript files.
 The docs folder contains the API documentation and
guides.
 The ext.js file contains the core API.
 The ext-all.js file contains the complete API in a
compressed or minified format.
 The ext-all-dev.js contains the complete API with
comments.
 The ext-all-debug.js contains the complete API with
console warnings. This file is meant to be used for
development.
 The ext-all-debug-w-comments.js contains the
complete API with comments and console warnings.
This file is meant to be used for development.
Presenter: Gourav Singh, Mindfire Solutions
Themes and Styling in Ext JS
 The following css file needs to be included.
Ext JS/resources/css/ext-all.css
 Three themes included in Ext JS4
‱ Classic (ext-all-classic.css)
‱ Grey (ext-all-gray.css)
‱ Neptune (ext-all-neptune.css)
‱ Crisp (Ext JS 5)
<head>
<link href="extjs/resources/css/ext-all-grey.css" rel="stylesheet"
type="text/css" />
<script src="extjs/ext-all.js" type="text/javascript"></script>
</head>
 The Ext JS API is grouped into packages like those in Java. Every package contains a collection of classes,
whose names begin with the letters Ext.
The general format of any class name is:
Ext.packageName.optionalSubPackageName.ClassName
Ex: Ext.chart.series.Pie
You can define a new class in Ext JS using the Ext.define method.
Ext.define(“MFS.seminar.extjs.Session",{});
Create an object of the class with Ext.create method.
var session1 = Ext.create(“Mfs.seminar.extjs.Session");
Or
var session1 = new Mfs.seminar.extjs.Session();
 The Ext.create("classname") method dynamically loads all the JavaScript files that the classname is
dependent on before creating an instance, whereas this is not possible when you use the new keyword.
Understanding Ext JS API
Presenter: Gourav Singh, Mindfire Solutions
 Constructor is the first function that’s called when an object is created. You
can define constructors in our classes using the special property
constructor.
Ext.define(“Mfs.seminar.extjs.Session",{
constructor : function(){
console.log("Book created");
}
});
Ext.create(“Mfs.seminar.extjs.Session");
Constructor
Presenter: Gourav Singh, Mindfire Solutions
Ext.define("Mfs.seminar.extjs.Session",{
title : "",
price : -1,
constructor : function(title,price){
this.title = title;
this.price = price;
}
});
var session1 = Ext.create("Mfs.seminar.extjs.Session",“Test",16.00);
console.log(session1.title);
console.log(session1.price);
Property
Presenter: Gourav Singh, Mindfire Solutions
 Ext JS provides a config section for every class where you can list the attributes of the class with
default values.
 The object can be created by initializing the attributes in which you are interested.
Ext.define("Mfs.seminar.extjs.Book",{
config : {
title : "",
price : -1,
authors: []
},
constructor : function(cfg){
this.initConfig(cfg);
}
});
 The variables declared in the config section have the getter/setter methods generated
automatically.
 The config generates an apply method for every attribute automatically as well. The apply
method is called internally by the setter method.
Config
Presenter: Gourav Singh, Mindfire Solutions
 You can define custom methods in classes as shown below.
Ext.define("Mfs.seminar.extjs.Book",{
config : {
title : "", price: 0
},
constructor : function(cfg){
this.initConfig(cfg);
},
read: function(){
console.log("Reading " + this.getTitle());
}
});
var xml = Ext.create("Mfs.seminar.extjs.Book",{
title : "XML", price:12.00
});
xml.read(); //Prints Reading XML
Methods
Presenter: Gourav Singh, Mindfire Solutions
 Ext JS provides a statics property where you can list static variables and methods. The static
members can be accessed using the class name, as in OO languages.
Ext.define("Mfs.seminar.extjs.Book",{
statics : {
numberOfBooks: 0,
getNumberOfBooks: function(){
return this.numberOfBooks;
}
},
constructor : function(){
this.statics().numberOfBooks++;
}
});
Ext.create("Mfs.seminar.extjs.Book");
Ext.create("Mfs.seminar.extjs.Book");
console.log(Mfs.seminar.extjs.Book.getNumberOfBooks());
Static Members
Presenter: Gourav Singh, Mindfire Solutions
 We have an extend keyword that can be used to inherit a class in Ext JS 4.
Ext.define(“Mfs.seminar.extjs.Employee",{
config : {
employeeid : "",
name : "",
salary : 0
},
constructor : function(cfg){
this.initConfig(cfg);
},
work : function(){
console.log(this.getName() + " is working");
}
});
Ext.define("Mfs.seminar.extjs.Developer",{
extend : "Mfs.seminar.extjs.Employee",
config : {
Level : 1
}
});
Inheritance
Presenter: Gourav Singh, Mindfire Solutions
 Mixins help you to mix the behavior of different classes into your class. Your class can have the
functionalities of any number of classes mixed together. It’s somewhat similar to interfaces in
Java where a class can implement any number of interfaces.
Ext.define("Aquatic",{
swim : function(){
console.log("Swimming");
}
});
Ext.define("Terrestrial",{
walk : function(){
console.log("Walking");
}
});
Ext.define("Reptile",{
mixins : ["Aquatic","Terrestrial"]
});
var reptile = Ext.create("Reptile");
reptile.swim();
reptile.walk();
Mixins
Presenter: Gourav Singh, Mindfire Solutions
 You can define an alias name for the classes. The alias name is mainly used when you create
custom components.
 You can use the alias property in the definition of the class as shown below.
Ext.define("Mfs.seminar.extjs.Book", {
alias : "Book",
});
Ext.create("Book");
 There are certain conventions involved in creating these alias names. For example, alias names
for custom components begin with the prefix widget, whereas alias names for custom proxy
classes begin with proxy.
Alias
Presenter: Gourav Singh, Mindfire Solutions
 Ext JS 4 provides a way to create singleton classes. Singleton is a popular design pattern in OO
languages where a class configured to be singleton has only one instance throughout the
application.
Ext.define(“Mfs.seminar.extjs.Company", {
singleton : true,
config: {
title: “Mindfire Solutions",
},
getNumberOfEmployees: function () {
return 700;
}
});
console.log(Mfs.seminar.extjs.Company.title);
console.log(Mfs.seminar.extjs.Company.getNumberOfEmployees());
Singleton
Presenter: Gourav Singh, Mindfire Solutions
Presenter: Gourav Singh, Mindfire Solutions
Ext JS Component Lifecycle
 Initialization
‱ The config object is applied
‱ The base Component events are created
‱ The component is registered in ComponentMgr
‱ The initComponent method is called
‱ Plugins are loaded (if applicable)
‱ State is initialized (if applicable)
‱ The component is rendered (if applicable)
 Rendering
‱ The beforerender event is fired
‱ The container is set
‱ The onRender method is called
‱ Custom class and/or style applied
‱ The render event is fired
‱ The afterRender method is called
 Destruction
‱ The beforedestroy event is fired
‱ The beforeDestroy method is called
‱ Element and its listeners are removed
‱ The onDestroy method is called
‱ Component is unregistered from
ComponentMgr
‱ The destroy event is fired
‱ Event listeners on the Component are
removed
Presenter: Gourav Singh, Mindfire Solutions
Ext JS Components and Events
 Ext.Component: It serves as the base class for all the UI components.
Ext.create("Ext.Component", {
html: "Raw Component",
renderTo : Ext.getBody()
});
The above code displays a text Raw Component in the page. It generates the following HTML snippet.
<div id="component-1099 class="x-component x-component-default">Raw Component</div>
Presenter: Gourav Singh, Mindfire Solutions
Ext JS Components and Events
 Ext.container.Container: Ext.container.Container class is the base class for all the container-based
components in Ext JS .
Ext.create("Ext.container.Container", {
html : "Raw Container",
renderTo: Ext.getBody()
});
The above code displays a text Raw Component in the page. It generates the following HTML snippet.
<div id="container-1009" class="x-container x-container-default">Raw Container
<div id="container-1009-clearEl" class="x-clear" role="presentation"></div>
</div>
Presenter: Gourav Singh, Mindfire Solutions
Ext JS Container Controls
Ext.panel.Panel: Ext.panel.Panel with the xtype ‘panel' is the root container class for several container
classes. It’s probably the most commonly used container class.
Ext.create("Ext.panel.Panel",{
title : "Sample Panel",
items : [
...
]
});
Ext.panel.Panel is inherited by a number of classes shown here.
Ext.form.Panel: Represents a form
Ext.menu.Menu: Represents a menu
Ext.window.Window: Represents a floatable, draggable window component
Ext.tab.Panel: Represents a tabbed container
Ext.grid.Panel: Represents a grid
Presenter: Gourav Singh, Mindfire Solutions
Ext JS Layouts
 Auto Layout: This layout manager automatically renders the components in a container.
 Absolute Layout: This is the simplest layout in which we can place the component using x, y
coordinate values in the container.
 Fit Layout: The fit layout arranges the contents of the container to occupy the space completely. It fits
the items to the container’s size. Fit layout is usually used on containers that have a single item.
 Anchor Layout: The anchor layout manager arranges the items of a container relative to the size of
the container. Whenever the container is resized, the anchor layout manager rearranges the items
relative to the new size of the container.
 Box Layout: Box layout is subdivided into two types, Vbox and Hbox.
 Accordion Layout: Accordion layout is an extension of VBox layout. It arranges a set of panels
vertically with collapse and expandable features.
 Table Layout: The Table layout is similar to a HTML table element.
 Column Layout: Column layout arranges the container in separate columns starting from left to right
with items that uses column layout is configured with a columnWidth( % or value) attribute.
 Border Layout: Using Border Layout we can design a master layout with regions like header, footer,
and menus.
 Card Layout: In card layout the components are placed one after the other along the z-index.
Question and
Answer
Presenter: Gourav Singh, Mindfire Solutions
Thank you
Presenter: Gourav Singh, Mindfire Solutions
Reference Link: http://docs.sencha.com/extjs/4.2.2/

More Related Content

What's hot (20)

PDF
JavaScript Modules Done Right
Mariusz Nowak
 
PPT
Learn javascript easy steps
prince Loffar
 
PPTX
Spring boot
NexThoughts Technologies
 
ODP
Jquery- One slide completing all JQuery
Knoldus Inc.
 
PDF
Dart for Java Developers
Yakov Fain
 
PDF
Intro To JavaScript Unit Testing - Ran Mizrahi
Ran Mizrahi
 
PPTX
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...
Irfan Maulana
 
PDF
Java script tutorial
Doeun KOCH
 
PPTX
Java
Aashish Jain
 
PPTX
WPF and Prism 4.1 Workshop at BASTA Austria
Rainer Stropek
 
PDF
JavaScript Basics and Best Practices - CC FE & UX
JWORKS powered by Ordina
 
PPT
Tellurium 0.7.0 presentation
John.Jian.Fang
 
PPT
Patterns In-Javascript
Mindfire Solutions
 
PPS
Advance Java
Vidyacenter
 
PPTX
Lab#1 - Front End Development
Walid Ashraf
 
PDF
Seven Versions of One Web Application
Yakov Fain
 
PPT
Java script -23jan2015
Sasidhar Kothuru
 
PPTX
Developing components and extensions for ext js
Mats Bryntse
 
PDF
Day 5
Vivek Bhusal
 
JavaScript Modules Done Right
Mariusz Nowak
 
Learn javascript easy steps
prince Loffar
 
Jquery- One slide completing all JQuery
Knoldus Inc.
 
Dart for Java Developers
Yakov Fain
 
Intro To JavaScript Unit Testing - Ran Mizrahi
Ran Mizrahi
 
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...
Irfan Maulana
 
Java script tutorial
Doeun KOCH
 
Java
Aashish Jain
 
WPF and Prism 4.1 Workshop at BASTA Austria
Rainer Stropek
 
JavaScript Basics and Best Practices - CC FE & UX
JWORKS powered by Ordina
 
Tellurium 0.7.0 presentation
John.Jian.Fang
 
Patterns In-Javascript
Mindfire Solutions
 
Advance Java
Vidyacenter
 
Lab#1 - Front End Development
Walid Ashraf
 
Seven Versions of One Web Application
Yakov Fain
 
Java script -23jan2015
Sasidhar Kothuru
 
Developing components and extensions for ext js
Mats Bryntse
 
Day 5
Vivek Bhusal
 

Similar to ExtJs Basic Part-1 (20)

PPTX
Extension Javascript
Yatin Gupta
 
ODP
ExtJS framework
Vincenzo Ferrari
 
PPTX
Building Rich Internet Applications with Ext JS
Mats Bryntse
 
PPTX
SenchaCon 2016: Modernizing the Ext JS Class System - Don Griffin
Sencha
 
PPT
ExtjsPart1
Abhinav Goel
 
PPTX
Ext JS Introduction
Anand Dayalan
 
PDF
Ext JS in Action 1st Edition Jesus Garcia
oiardgmdt4957
 
PPTX
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
Sencha
 
PPTX
Ext Js introduction and new features in Ext Js 6
Sushil Shinde
 
PPTX
Introduction to ExtJS and its new features
Synerzip
 
PPTX
Kickstart sencha extjs
Shakti Shrestha
 
PDF
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha
 
PDF
Architecting your app in ext js 4, part 2 learn sencha
Rahul Kumar
 
PPT
Ext js Part 2- MVC
Mindfire Solutions
 
PDF
Best ExtJS Training in Bangalore. Join myTectra Now
myTectra Learning Solutions Private Ltd
 
PDF
(ATS6-DEV03) Building an Enterprise Web Solution with AEP
BIOVIA
 
PDF
Top JavaScript Frameworks Compared
Harbinger Systems - HRTech Builder of Choice
 
PDF
Javascript classes and scoping
Patrick Sheridan
 
PDF
The "In Action" Pattern for RIA Development
Sencha
 
PPTX
Ext JS Architecture Best Practices - Mitchell Simeons
Sencha
 
Extension Javascript
Yatin Gupta
 
ExtJS framework
Vincenzo Ferrari
 
Building Rich Internet Applications with Ext JS
Mats Bryntse
 
SenchaCon 2016: Modernizing the Ext JS Class System - Don Griffin
Sencha
 
ExtjsPart1
Abhinav Goel
 
Ext JS Introduction
Anand Dayalan
 
Ext JS in Action 1st Edition Jesus Garcia
oiardgmdt4957
 
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
Sencha
 
Ext Js introduction and new features in Ext Js 6
Sushil Shinde
 
Introduction to ExtJS and its new features
Synerzip
 
Kickstart sencha extjs
Shakti Shrestha
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha
 
Architecting your app in ext js 4, part 2 learn sencha
Rahul Kumar
 
Ext js Part 2- MVC
Mindfire Solutions
 
Best ExtJS Training in Bangalore. Join myTectra Now
myTectra Learning Solutions Private Ltd
 
(ATS6-DEV03) Building an Enterprise Web Solution with AEP
BIOVIA
 
Top JavaScript Frameworks Compared
Harbinger Systems - HRTech Builder of Choice
 
Javascript classes and scoping
Patrick Sheridan
 
The "In Action" Pattern for RIA Development
Sencha
 
Ext JS Architecture Best Practices - Mitchell Simeons
Sencha
 
Ad

More from Mindfire Solutions (20)

PDF
Physician Search and Review
Mindfire Solutions
 
PDF
diet management app
Mindfire Solutions
 
PDF
Business Technology Solution
Mindfire Solutions
 
PDF
Remote Health Monitoring
Mindfire Solutions
 
PDF
Influencer Marketing Solution
Mindfire Solutions
 
PPT
ELMAH
Mindfire Solutions
 
PPT
High Availability of Azure Applications
Mindfire Solutions
 
PPTX
IOT Hands On
Mindfire Solutions
 
PPTX
Glimpse of Loops Vs Set
Mindfire Solutions
 
ODP
Oracle Sql Developer-Getting Started
Mindfire Solutions
 
PPT
Adaptive Layout In iOS 8
Mindfire Solutions
 
PPT
Introduction to Auto-layout : iOS/Mac
Mindfire Solutions
 
PPT
LINQPad - utility Tool
Mindfire Solutions
 
PPT
Get started with watch kit development
Mindfire Solutions
 
PPTX
Swift vs Objective-C
Mindfire Solutions
 
ODP
Material Design in Android
Mindfire Solutions
 
ODP
Introduction to OData
Mindfire Solutions
 
PPT
Spring Security Introduction
Mindfire Solutions
 
PPT
Angular In Depth
Mindfire Solutions
 
PPT
Django Models
Mindfire Solutions
 
Physician Search and Review
Mindfire Solutions
 
diet management app
Mindfire Solutions
 
Business Technology Solution
Mindfire Solutions
 
Remote Health Monitoring
Mindfire Solutions
 
Influencer Marketing Solution
Mindfire Solutions
 
High Availability of Azure Applications
Mindfire Solutions
 
IOT Hands On
Mindfire Solutions
 
Glimpse of Loops Vs Set
Mindfire Solutions
 
Oracle Sql Developer-Getting Started
Mindfire Solutions
 
Adaptive Layout In iOS 8
Mindfire Solutions
 
Introduction to Auto-layout : iOS/Mac
Mindfire Solutions
 
LINQPad - utility Tool
Mindfire Solutions
 
Get started with watch kit development
Mindfire Solutions
 
Swift vs Objective-C
Mindfire Solutions
 
Material Design in Android
Mindfire Solutions
 
Introduction to OData
Mindfire Solutions
 
Spring Security Introduction
Mindfire Solutions
 
Angular In Depth
Mindfire Solutions
 
Django Models
Mindfire Solutions
 
Ad

Recently uploaded (20)

PPTX
Hardware(Central Processing Unit ) CU and ALU
RizwanaKalsoom2
 
PDF
Driver Easy Pro 6.1.1 Crack Licensce key 2025 FREE
utfefguu
 
PDF
Build It, Buy It, or Already Got It? Make Smarter Martech Decisions
bbedford2
 
PPTX
Homogeneity of Variance Test Options IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PPTX
Agentic Automation: Build & Deploy Your First UiPath Agent
klpathrudu
 
PPTX
Agentic Automation Journey Session 1/5: Context Grounding and Autopilot for E...
klpathrudu
 
PPTX
Change Common Properties in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PDF
Digger Solo: Semantic search and maps for your local files
seanpedersen96
 
PDF
Linux Certificate of Completion - LabEx Certificate
VICTOR MAESTRE RAMIREZ
 
PPTX
Agentic Automation Journey Series Day 2 – Prompt Engineering for UiPath Agents
klpathrudu
 
PDF
SciPy 2025 - Packaging a Scientific Python Project
Henry Schreiner
 
PDF
vMix Pro 28.0.0.42 Download vMix Registration key Bundle
kulindacore
 
PPTX
Home Care Tools: Benefits, features and more
Third Rock Techkno
 
PPTX
Foundations of Marketo Engage - Powering Campaigns with Marketo Personalization
bbedford2
 
PDF
4K Video Downloader Plus Pro Crack for MacOS New Download 2025
bashirkhan333g
 
PPTX
Help for Correlations in IBM SPSS Statistics.pptx
Version 1 Analytics
 
PDF
[Solution] Why Choose the VeryPDF DRM Protector Custom-Built Solution for You...
Lingwen1998
 
PDF
Empower Your Tech Vision- Why Businesses Prefer to Hire Remote Developers fro...
logixshapers59
 
PDF
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pdf
Varsha Nayak
 
PDF
iTop VPN With Crack Lifetime Activation Key-CODE
utfefguu
 
Hardware(Central Processing Unit ) CU and ALU
RizwanaKalsoom2
 
Driver Easy Pro 6.1.1 Crack Licensce key 2025 FREE
utfefguu
 
Build It, Buy It, or Already Got It? Make Smarter Martech Decisions
bbedford2
 
Homogeneity of Variance Test Options IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
Agentic Automation: Build & Deploy Your First UiPath Agent
klpathrudu
 
Agentic Automation Journey Session 1/5: Context Grounding and Autopilot for E...
klpathrudu
 
Change Common Properties in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
Digger Solo: Semantic search and maps for your local files
seanpedersen96
 
Linux Certificate of Completion - LabEx Certificate
VICTOR MAESTRE RAMIREZ
 
Agentic Automation Journey Series Day 2 – Prompt Engineering for UiPath Agents
klpathrudu
 
SciPy 2025 - Packaging a Scientific Python Project
Henry Schreiner
 
vMix Pro 28.0.0.42 Download vMix Registration key Bundle
kulindacore
 
Home Care Tools: Benefits, features and more
Third Rock Techkno
 
Foundations of Marketo Engage - Powering Campaigns with Marketo Personalization
bbedford2
 
4K Video Downloader Plus Pro Crack for MacOS New Download 2025
bashirkhan333g
 
Help for Correlations in IBM SPSS Statistics.pptx
Version 1 Analytics
 
[Solution] Why Choose the VeryPDF DRM Protector Custom-Built Solution for You...
Lingwen1998
 
Empower Your Tech Vision- Why Businesses Prefer to Hire Remote Developers fro...
logixshapers59
 
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pdf
Varsha Nayak
 
iTop VPN With Crack Lifetime Activation Key-CODE
utfefguu
 

ExtJs Basic Part-1

  • 1. Presenter: Gourav Singh, Mindfire Solutions Date: 04/05/2015 Basic of Ext JS Framework
  • 2. Presenter: Gourav Singh, Mindfire Solutions Agenda  Why Ext JS?  Overview of Ext JS API  Themes and Styling in Ext JS  Understanding Ext JS API  Ext JS Component Lifecycle  Ext JS Components and Events  Ext JS Layouts
  • 3. Presenter: Gourav Singh, Mindfire Solutions Why Ext JS?  Object-Oriented flavor  Rich UI controls  Support for HTML 5  MVC architecture  Themes and Styling  Documentation  Moving to the mobile version
  • 4. Presenter: Gourav Singh, Mindfire Solutions Overview of Ext JS Framework  The resources folder contains the standard set of themes that you can use in your application.  The src folder contains the entire API organized into numerous JavaScript files.  The docs folder contains the API documentation and guides.  The ext.js file contains the core API.  The ext-all.js file contains the complete API in a compressed or minified format.  The ext-all-dev.js contains the complete API with comments.  The ext-all-debug.js contains the complete API with console warnings. This file is meant to be used for development.  The ext-all-debug-w-comments.js contains the complete API with comments and console warnings. This file is meant to be used for development.
  • 5. Presenter: Gourav Singh, Mindfire Solutions Themes and Styling in Ext JS  The following css file needs to be included. Ext JS/resources/css/ext-all.css  Three themes included in Ext JS4 ‱ Classic (ext-all-classic.css) ‱ Grey (ext-all-gray.css) ‱ Neptune (ext-all-neptune.css) ‱ Crisp (Ext JS 5) <head> <link href="extjs/resources/css/ext-all-grey.css" rel="stylesheet" type="text/css" /> <script src="extjs/ext-all.js" type="text/javascript"></script> </head>
  • 6.  The Ext JS API is grouped into packages like those in Java. Every package contains a collection of classes, whose names begin with the letters Ext. The general format of any class name is: Ext.packageName.optionalSubPackageName.ClassName Ex: Ext.chart.series.Pie You can define a new class in Ext JS using the Ext.define method. Ext.define(“MFS.seminar.extjs.Session",{}); Create an object of the class with Ext.create method. var session1 = Ext.create(“Mfs.seminar.extjs.Session"); Or var session1 = new Mfs.seminar.extjs.Session();  The Ext.create("classname") method dynamically loads all the JavaScript files that the classname is dependent on before creating an instance, whereas this is not possible when you use the new keyword. Understanding Ext JS API Presenter: Gourav Singh, Mindfire Solutions
  • 7.  Constructor is the first function that’s called when an object is created. You can define constructors in our classes using the special property constructor. Ext.define(“Mfs.seminar.extjs.Session",{ constructor : function(){ console.log("Book created"); } }); Ext.create(“Mfs.seminar.extjs.Session"); Constructor Presenter: Gourav Singh, Mindfire Solutions
  • 8. Ext.define("Mfs.seminar.extjs.Session",{ title : "", price : -1, constructor : function(title,price){ this.title = title; this.price = price; } }); var session1 = Ext.create("Mfs.seminar.extjs.Session",“Test",16.00); console.log(session1.title); console.log(session1.price); Property Presenter: Gourav Singh, Mindfire Solutions
  • 9.  Ext JS provides a config section for every class where you can list the attributes of the class with default values.  The object can be created by initializing the attributes in which you are interested. Ext.define("Mfs.seminar.extjs.Book",{ config : { title : "", price : -1, authors: [] }, constructor : function(cfg){ this.initConfig(cfg); } });  The variables declared in the config section have the getter/setter methods generated automatically.  The config generates an apply method for every attribute automatically as well. The apply method is called internally by the setter method. Config Presenter: Gourav Singh, Mindfire Solutions
  • 10.  You can define custom methods in classes as shown below. Ext.define("Mfs.seminar.extjs.Book",{ config : { title : "", price: 0 }, constructor : function(cfg){ this.initConfig(cfg); }, read: function(){ console.log("Reading " + this.getTitle()); } }); var xml = Ext.create("Mfs.seminar.extjs.Book",{ title : "XML", price:12.00 }); xml.read(); //Prints Reading XML Methods Presenter: Gourav Singh, Mindfire Solutions
  • 11.  Ext JS provides a statics property where you can list static variables and methods. The static members can be accessed using the class name, as in OO languages. Ext.define("Mfs.seminar.extjs.Book",{ statics : { numberOfBooks: 0, getNumberOfBooks: function(){ return this.numberOfBooks; } }, constructor : function(){ this.statics().numberOfBooks++; } }); Ext.create("Mfs.seminar.extjs.Book"); Ext.create("Mfs.seminar.extjs.Book"); console.log(Mfs.seminar.extjs.Book.getNumberOfBooks()); Static Members Presenter: Gourav Singh, Mindfire Solutions
  • 12.  We have an extend keyword that can be used to inherit a class in Ext JS 4. Ext.define(“Mfs.seminar.extjs.Employee",{ config : { employeeid : "", name : "", salary : 0 }, constructor : function(cfg){ this.initConfig(cfg); }, work : function(){ console.log(this.getName() + " is working"); } }); Ext.define("Mfs.seminar.extjs.Developer",{ extend : "Mfs.seminar.extjs.Employee", config : { Level : 1 } }); Inheritance Presenter: Gourav Singh, Mindfire Solutions
  • 13.  Mixins help you to mix the behavior of different classes into your class. Your class can have the functionalities of any number of classes mixed together. It’s somewhat similar to interfaces in Java where a class can implement any number of interfaces. Ext.define("Aquatic",{ swim : function(){ console.log("Swimming"); } }); Ext.define("Terrestrial",{ walk : function(){ console.log("Walking"); } }); Ext.define("Reptile",{ mixins : ["Aquatic","Terrestrial"] }); var reptile = Ext.create("Reptile"); reptile.swim(); reptile.walk(); Mixins Presenter: Gourav Singh, Mindfire Solutions
  • 14.  You can define an alias name for the classes. The alias name is mainly used when you create custom components.  You can use the alias property in the definition of the class as shown below. Ext.define("Mfs.seminar.extjs.Book", { alias : "Book", }); Ext.create("Book");  There are certain conventions involved in creating these alias names. For example, alias names for custom components begin with the prefix widget, whereas alias names for custom proxy classes begin with proxy. Alias Presenter: Gourav Singh, Mindfire Solutions
  • 15.  Ext JS 4 provides a way to create singleton classes. Singleton is a popular design pattern in OO languages where a class configured to be singleton has only one instance throughout the application. Ext.define(“Mfs.seminar.extjs.Company", { singleton : true, config: { title: “Mindfire Solutions", }, getNumberOfEmployees: function () { return 700; } }); console.log(Mfs.seminar.extjs.Company.title); console.log(Mfs.seminar.extjs.Company.getNumberOfEmployees()); Singleton Presenter: Gourav Singh, Mindfire Solutions
  • 16. Presenter: Gourav Singh, Mindfire Solutions Ext JS Component Lifecycle  Initialization ‱ The config object is applied ‱ The base Component events are created ‱ The component is registered in ComponentMgr ‱ The initComponent method is called ‱ Plugins are loaded (if applicable) ‱ State is initialized (if applicable) ‱ The component is rendered (if applicable)  Rendering ‱ The beforerender event is fired ‱ The container is set ‱ The onRender method is called ‱ Custom class and/or style applied ‱ The render event is fired ‱ The afterRender method is called  Destruction ‱ The beforedestroy event is fired ‱ The beforeDestroy method is called ‱ Element and its listeners are removed ‱ The onDestroy method is called ‱ Component is unregistered from ComponentMgr ‱ The destroy event is fired ‱ Event listeners on the Component are removed
  • 17. Presenter: Gourav Singh, Mindfire Solutions Ext JS Components and Events  Ext.Component: It serves as the base class for all the UI components. Ext.create("Ext.Component", { html: "Raw Component", renderTo : Ext.getBody() }); The above code displays a text Raw Component in the page. It generates the following HTML snippet. <div id="component-1099 class="x-component x-component-default">Raw Component</div>
  • 18. Presenter: Gourav Singh, Mindfire Solutions Ext JS Components and Events  Ext.container.Container: Ext.container.Container class is the base class for all the container-based components in Ext JS . Ext.create("Ext.container.Container", { html : "Raw Container", renderTo: Ext.getBody() }); The above code displays a text Raw Component in the page. It generates the following HTML snippet. <div id="container-1009" class="x-container x-container-default">Raw Container <div id="container-1009-clearEl" class="x-clear" role="presentation"></div> </div>
  • 19. Presenter: Gourav Singh, Mindfire Solutions Ext JS Container Controls Ext.panel.Panel: Ext.panel.Panel with the xtype ‘panel' is the root container class for several container classes. It’s probably the most commonly used container class. Ext.create("Ext.panel.Panel",{ title : "Sample Panel", items : [ ... ] }); Ext.panel.Panel is inherited by a number of classes shown here. Ext.form.Panel: Represents a form Ext.menu.Menu: Represents a menu Ext.window.Window: Represents a floatable, draggable window component Ext.tab.Panel: Represents a tabbed container Ext.grid.Panel: Represents a grid
  • 20. Presenter: Gourav Singh, Mindfire Solutions Ext JS Layouts  Auto Layout: This layout manager automatically renders the components in a container.  Absolute Layout: This is the simplest layout in which we can place the component using x, y coordinate values in the container.  Fit Layout: The fit layout arranges the contents of the container to occupy the space completely. It fits the items to the container’s size. Fit layout is usually used on containers that have a single item.  Anchor Layout: The anchor layout manager arranges the items of a container relative to the size of the container. Whenever the container is resized, the anchor layout manager rearranges the items relative to the new size of the container.  Box Layout: Box layout is subdivided into two types, Vbox and Hbox.  Accordion Layout: Accordion layout is an extension of VBox layout. It arranges a set of panels vertically with collapse and expandable features.  Table Layout: The Table layout is similar to a HTML table element.  Column Layout: Column layout arranges the container in separate columns starting from left to right with items that uses column layout is configured with a columnWidth( % or value) attribute.  Border Layout: Using Border Layout we can design a master layout with regions like header, footer, and menus.  Card Layout: In card layout the components are placed one after the other along the z-index.
  • 21. Question and Answer Presenter: Gourav Singh, Mindfire Solutions
  • 22. Thank you Presenter: Gourav Singh, Mindfire Solutions Reference Link: http://docs.sencha.com/extjs/4.2.2/