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
Related flashcards

ARM architecture

23 cards

X86 architecture

22 cards

System software

24 cards

Borland software

18 cards

Duke Nukem

15 cards

Create Flashcards