ExtJs Basic Part-1

Presenter: Gourav Singh, Mindfire Solutions
Date: 04/05/2015
Basic of Ext JS
Framework

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

Why Ext JS?
 Object-Oriented flavor
 Rich UI controls
 Support for HTML 5
 MVC architecture
 Themes and Styling
 Documentation
 Moving to the mobile version

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.

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

 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

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

 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

 You can define custom methods in classes as shown below.
config : {
title : "", price: 0
},
},
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

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

 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
},
},
work : function(){
console.log(this.getName() + " is working");
}
});
Ext.define("Mfs.seminar.extjs.Developer",{
extend : "Mfs.seminar.extjs.Employee",
config : {
Level : 1
}
});
Inheritance

 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

 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

 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

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

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>

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>

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

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

Thank you
Reference Link: http://docs.sencha.com/extjs/4.2.2/

ExtJs Basic Part-1

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to ExtJs Basic Part-1

Similar to ExtJs Basic Part-1 (20)

More from Mindfire Solutions

More from Mindfire Solutions (20)

Recently uploaded

Recently uploaded (20)

ExtJs Basic Part-1