Krishna Mohan Koyya Proprietor and Principal Consultant Glarimy Technology Services www.glarimy.com No cross discussions Primarily demonstration based, not slides Timings: 9.30-17.30, 12.45-13.30, 15.30-15.30. Lab Set-up Windows or any other O / S of your choice Ext JS 4.x Notepad++ or any other editor of your choice with debugger installed.
Krishna Mohan Koyya Proprietor and Principal Consultant Glarimy Technology Services www.glarimy.com No cross discussions Primarily demonstration based, not slides Timings: 9.30-17.30, 12.45-13.30, 15.30-15.30. Lab Set-up Windows or any other O / S of your choice Ext JS 4.x Notepad++ or any other editor of your choice with debugger installed.
Krishna Mohan Koyya Proprietor and Principal Consultant Glarimy Technology Services www.glarimy.com No cross discussions Primarily demonstration based, not slides Timings: 9.30-17.30, 12.45-13.30, 15.30-15.30. Lab Set-up Windows or any other O / S of your choice Ext JS 4.x Notepad++ or any other editor of your choice with debugger installed.
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
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
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.