Proprietor and Principal Consultant
Glarimy Technology Services krishna@glarimy.com
| www.glarimy.com

 Please switch-off or mute your mobile phones
 Please do not bring your regular work to the class
 No cross discussions
 Primarily demonstration based, not slides
 Stop me for any questions
 Visit http://www.glarimy.com/files/extjs for references
 Visit http://www.glarimy.com
for code samples
 Timings: 9.30-17.30
 Breaks: 11.15-11.30, 12.45-13.45 and 15.30-15.45

 Windows or any other O/S of your choice
 ExtJS 4.x
 Notepad++ or any other editor of your choice
 Google Chrome or any other browser of your choice with debugger installed
 Tomcat 6 or any other HTTP server of your choice
 JDK 6, if required for your server



Overview of JavaScript, CSS and DOM
Asynchronous communication using AJAX, Web 2.0 with AJAX and JSON




Getting Started with Ext JS 4
Loading the Library
Application Architecture
Ext Application Design, Introducing Sencha MVC


Fundamental Classes
Ext.Element, Ext.CompositeElement, Ext.DomHelper, Ext.DomQuery


Event Handling
Events in Ext & DOM Events, Event Handlers & Delegated Event Handling


Creating & Extending Classes
Creating a Class & Extending a Class, Extending a Component, Class System, Class
Definition, Class Loading



Working with Data
Defining Models, Validating your Data, Defining Associations,
Defining Proxies, Defining Stores


Component Model
Overview, Component Manager, Component vs. Element, Component configuration


Laying out your GUI
Defining Panels, Headers, Resizing Panels, Defining Toolbars


Defining Layouts and Panels
HBOX, VBOX, Tabs, Viewport, TabPanel, Tree Panel, GridPanel,
FormPanel



Form Components Overview
Checkbox, ComboBox, CompositeField, DateField,
DisplayField, Hidden, HtmlEditor, NumberField, Radio,
SliderField, TextArea, TextField


Working with Forms
Understanding Form Layout, Applying Validations, Form wizards


Effects and animation
Drag and Drop



Introducing grid features
Defining a read-only grid, Editing within a grid, Pagination and scrolling


Sencha MVC
Ext.applysmd, Ext.util.Format





Internationalization
Debugging
Logging
Customization
Performance

 Name: Krishna Mohan Koyya
 Proprietor & Principal Consultant of Glarimy
 Areas: Java, JEE, Web 2.0, Design & Architecture
 Academics: B.Tech (ECE) and M.Tech (CST)
 Development Experience: 10 years in Java & NMS domain with Cisco, Wipro & HP
 Training Experience: Since 2008
 Recent Clients: Oracle, Bosch, McAfee, ADP and etc.,
 Profile: http://www.glarimy.com/krishna.php



Overview of JavaScript, CSS and DOM
Asynchronous communication using AJAX, Web 2.0 with AJAX and JSON




Getting Started with Ext JS 4
Loading the Library
Application Architecture
Ext Application Design, Introducing Sencha MVC


Fundamental Classes
Ext.Element, Ext.CompositeElement, Ext.DomHelper, Ext.DomQuery


Event Handling
Events in Ext & DOM Events, Event Handlers & Delegated Event Handling


Creating & Extending Classes
Creating a Class & Extending a Class, Extending a Component, Class System, Class
Definition, Class Loading

 A Javascript library for Web 2.0 development
 Offers API for


Element Selection
DOM Manipulation


Style Manipulation
Event Handling
 AJAX
 Also offers pre-built UI Components


Layouts
Form Widgets and Application Widgets




Architecture



Ext Foundation: Ext class system
Ext Core: DOM, CSS, Event & AJAX API
Ext JS: UI Components
Distribution
 File ext.js: Ext Foundation & Ext Core (Minified)




File ext-all.js: All three layers (Minified)
File xxx-debug.js: Without minification
File xxx-dev.js: Development distribution
The CSS files under resources/css
Available on CDN: http://cdn.sench.io

 Defining a class
 Ext.define(name, properties_and_methods, callback)
 Class name must not use Ext as the root
 Instantiating a class
 Ext.create(name, properties)
 Applying properties
 Ext.apply(this, properties || {})
 Alias to the class name
 Add alias property to the class definition

 Extending a parent
 Add extend property to the class definition
 Every class is an extension of Ext.Base
 Mixing multiple classes
 Add mixins property to the class definition

 Each mixed-in class must have a reference name
Access properties using mixins of the object
 This is a way to implement multiple inheritance

 Configuration
 Add config property to the class
 Setters and getters are automatically created
 Call applyConfig() in the constructor function
 Pass config values during instantiation
 Validating before setting config value
 applyXXX method with a return value

 Making a singleton
 Set property singleton to ‘yes’
 Class can not be instantiated
 Normally used for class configurations
 Static Members
 Add statics property to the class


All instances share the same reference to statics
Use self operator on the objects to access statics




Dynamic loading


Ext.Loader must be configured
Loader is disabled in ext-all.js
Loading the class
 Using Ext.require() function



Loads the class asynchronously
Class name must match file name
Class namespace must match file path
Using the class
 Within the Ext.onReady() function
 Executed only after all the required classes are loaded

 Ext.Element
 Encapsulates the DOM element
 Ext.CompositElement
 Encapsulates a collection of DOM elements
 Operations are transmitted to all the elements within
 Selecting elements


Ext.get(id or DOM reference)
 Returns Ext.Element
Ext.select(selector expression)
 Returns Ext.CompositElement

 Ext.Element offers several DOM manipulation API
 getHTML/setHTML: gets or sets inner HTML

 getAttribute/setAttribute: gets or sets the attribute value getValue/setValue: gets or sets value

 appendTo: append this element to the passed appendChild: appends the passed element to self

 child: selects the single direct child contains: checks if it is the ancestor of the passed one
 insertAfter/insertBefore/insertFirst
 Consider using DOMHelper

 Ext.Element offers several style manipulation API
 addCls, hasCls, removeCls, replaceCls, toggleCls
 Hide and show
 setStyle and applyStyles

 Ext.Element offers event handling API
 Setting up listener
 on(eventName, function(event, htmlElement, options),
[scope], [options]);
 Shorthand: addListener
 A JSON can be used for attaching multiple event listeners
 Removing listener
 un(eventName, cbHandler) or removeListener
 Ext.EventManager can be handy
 Event can be inspected for the target and other details

 Demonstration: Online Library console application using which a librarian should be able to add new titles to the stock, view the titles and their details and order for new titles.
 Exercise : An E-mail client application using which the mails and mail folders can be listed and new mails can be composed and sent.
 Assignment: Online Banking component using which the customer can view the account details and request for various services and track them.