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.
