Sencha ExtJS 4 Krishna Mohan Koyya Proprietor and Principal Consultant Glarimy Technology Services krishna@glarimy.com | 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 Instantiating 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 Mixing multiple classes 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 Static Members 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 Loading the class Using the class 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 Ext.CompositElement 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.