SenchaExtJS4

advertisement

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.

Download