Krishna Mohan Koyya

Proprietor and Principal Consultant Glarimy Technology Services [email protected]

| www.glarimy.com

Protocol

 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

Lab Set-up

 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

 

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-2

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

Schedule: Day-3

 

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

Schedule: Day-4

 

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

Trainer Introduction

 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

 

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 ExtJS

 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

Exploring Sencha ExtJS

   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

ExtJS Class System

 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

ExtJS Class System

 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

ExtJS Class System

 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

ExtJS Class System

 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

ExtJS Class System

   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

DOM Element Selection

 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

DOM Manipulation

 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

Style Manipulation

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

Event Handling

 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

Lab Session

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