SenchaExtJS4

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

similar documents