Sencha ExtJS 4Krishna Mohan Koyya

Proprietor and Principal ConsultantGlarimy Technology Services

krishna@glarimy.com | www.glarimy.com

ProtocolPlease switch-off or mute your mobile phonesPlease do not bring your regular work to the

classNo cross discussionsPrimarily demonstration based, not slidesStop me for any questionsVisit http://www.glarimy.com/files/extjs for

referencesVisit http://www.glarimy.com for code

samplesTimings: 9.30-17.30Breaks: 11.15-11.30, 12.45-13.45 and 15.30-

15.45

Lab Set-upWindows or any other O/S of your choiceExtJS 4.xNotepad++ or any other editor of your

choiceGoogle Chrome or any other browser of your

choice with debugger installedTomcat 6 or any other HTTP server of your

choiceJDK 6, if required for your server

Schedule: Day-1 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

Schedule: Day-2Working with DataDefining Models, Validating your Data, Defining Associations,

Defining Proxies, Defining Stores

Component ModelOverview, Component Manager, Component vs. Element,

Component configuration

Laying out your GUIDefining Panels, Headers, Resizing Panels, Defining Toolbars

Defining Layouts and PanelsHBOX, VBOX, Tabs, Viewport, TabPanel, Tree Panel, GridPanel,

FormPanel

Schedule: Day-3Form Components OverviewCheckbox, ComboBox, CompositeField, DateField,

DisplayField, Hidden, HtmlEditor, NumberField, Radio, SliderField, TextArea, TextField

Working with FormsUnderstanding Form Layout, Applying Validations,

Form wizards

Effects and animationDrag and Drop

Schedule: Day-4Introducing grid featuresDefining a read-only grid, Editing within a grid, Pagination

and scrolling

Sencha MVCExt.applysmd, Ext.util.Format

InternationalizationDebuggingLoggingCustomizationPerformance

Trainer IntroductionName: Krishna Mohan KoyyaProprietor & Principal Consultant of GlarimyAreas: Java, JEE, Web 2.0, Design &

ArchitectureAcademics: B.Tech (ECE) and M.Tech (CST)Development Experience: 10 years in Java &

NMS domain with Cisco, Wipro & HP Training Experience: Since 2008Recent Clients: Oracle, Bosch, McAfee, ADP

and etc., Profile: http://www.glarimy.com/krishna.php

Schedule: Day-1 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

Exploring Sencha ExtJSA Javascript library for Web 2.0 developmentOffers API for

Element SelectionDOM ManipulationStyle ManipulationEvent HandlingAJAX

Also offers pre-built UI ComponentsLayoutsForm Widgets and Application Widgets

Exploring Sencha ExtJSArchitecture

Ext Foundation: Ext class systemExt Core: DOM, CSS, Event & AJAX APIExt JS: UI Components

DistributionFile ext.js: Ext Foundation & Ext Core (Minified)File ext-all.js: All three layers (Minified)File xxx-debug.js: Without minificationFile xxx-dev.js: Development distributionThe CSS files under resources/css

Available on CDN: http://cdn.sench.io

ExtJS Class SystemDefining a class

Ext.define(name, properties_and_methods, callback)

Class name must not use Ext as the rootInstantiating a class

Ext.create(name, properties)Applying properties

Ext.apply(this, properties || {})Alias to the class name

Add alias property to the class definition

ExtJS Class SystemExtending a parent

Add extend property to the class definitionEvery class is an extension of Ext.Base

Mixing multiple classesAdd mixins property to the class definition

Each mixed-in class must have a reference nameAccess properties using mixins of the objectThis is a way to implement multiple inheritance

ExtJS Class SystemConfiguration

Add config property to the classSetters and getters are automatically createdCall applyConfig() in the constructor functionPass config values during instantiation

Validating before setting config valueapplyXXX method with a return value

ExtJS Class SystemMaking a singleton

Set property singleton to ‘yes’Class can not be instantiatedNormally used for class configurations

Static MembersAdd statics property to the classAll instances share the same reference to

staticsUse self operator on the objects to access

statics

ExtJS Class SystemDynamic loading

Ext.Loader must be configuredLoader is disabled in ext-all.js

Loading the classUsing Ext.require() functionLoads the class asynchronouslyClass name must match file nameClass namespace must match file path

Using the classWithin the Ext.onReady() functionExecuted only after all the required classes are loaded

DOM Element SelectionExt.Element

Encapsulates the DOM elementExt.CompositElement

Encapsulates a collection of DOM elementsOperations are transmitted to all the elements

withinSelecting elements

Ext.get(id or DOM reference) Returns Ext.Element

Ext.select(selector expression) Returns Ext.CompositElement

DOM ManipulationExt.Element offers several DOM manipulation API

getHTML/setHTML: gets or sets inner HTMLgetAttribute/setAttribute: gets or sets the attribute

valuegetValue/setValue: gets or sets valueappendTo: append this element to the passedappendChild: appends the passed element to selfchild: selects the single direct childcontains: checks if it is the ancestor of the passed oneinsertAfter/insertBefore/insertFirst

Consider using DOMHelper

Style ManipulationExt.Element offers several style manipulation

APIaddCls, hasCls, removeCls, replaceCls,

toggleClsHide and showsetStyle and applyStyles

Event HandlingExt.Element offers event handling APISetting up listener

on(eventName, function(event, htmlElement, options), [scope], [options]);

Shorthand: addListenerA JSON can be used for attaching multiple event

listenersRemoving listener

un(eventName, cbHandler) or removeListenerExt.EventManager can be handyEvent can be inspected for the target and other details

Lab SessionDemonstration: 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.