Sencha ExtJS 4
description
Transcript of Sencha ExtJS 4
Sencha ExtJS 4Krishna Mohan Koyya
Proprietor and Principal ConsultantGlarimy Technology Services
[email protected] | www.glarimy.com
ProtocolPlease switch-off or mute your mobile phonesPlease do not bring your regular work to the
classNo cross discussionsPrimarily demonstration based, not slidesStop me for any questionsVisit http://www.glarimy.com/files/extjs for
referencesVisit http://www.glarimy.com for code
samplesTimings: 9.30-17.30Breaks: 11.15-11.30, 12.45-13.45 and 15.30-
15.45
Lab Set-upWindows or any other O/S of your choiceExtJS 4.xNotepad++ or any other editor of your
choiceGoogle Chrome or any other browser of your
choice with debugger installedTomcat 6 or any other HTTP server of your
choiceJDK 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-2Working with DataDefining Models, Validating your Data, Defining Associations,
Defining Proxies, Defining Stores
Component ModelOverview, Component Manager, Component vs. Element,
Component configuration
Laying out your GUIDefining Panels, Headers, Resizing Panels, Defining Toolbars
Defining Layouts and PanelsHBOX, VBOX, Tabs, Viewport, TabPanel, Tree Panel, GridPanel,
FormPanel
Schedule: Day-3Form Components OverviewCheckbox, ComboBox, CompositeField, DateField,
DisplayField, Hidden, HtmlEditor, NumberField, Radio, SliderField, TextArea, TextField
Working with FormsUnderstanding Form Layout, Applying Validations,
Form wizards
Effects and animationDrag and Drop
Schedule: Day-4Introducing grid featuresDefining a read-only grid, Editing within a grid, Pagination
and scrolling
Sencha MVCExt.applysmd, Ext.util.Format
InternationalizationDebuggingLoggingCustomizationPerformance
Trainer IntroductionName: Krishna Mohan KoyyaProprietor & Principal Consultant of GlarimyAreas: Java, JEE, Web 2.0, Design &
ArchitectureAcademics: B.Tech (ECE) and M.Tech (CST)Development Experience: 10 years in Java &
NMS domain with Cisco, Wipro & HP Training Experience: Since 2008Recent 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 ExtJSA Javascript library for Web 2.0 developmentOffers API for
Element SelectionDOM ManipulationStyle ManipulationEvent HandlingAJAX
Also offers pre-built UI ComponentsLayoutsForm Widgets and Application Widgets
Exploring Sencha ExtJSArchitecture
Ext Foundation: Ext class systemExt Core: DOM, CSS, Event & AJAX APIExt JS: UI Components
DistributionFile ext.js: Ext Foundation & Ext Core (Minified)File ext-all.js: All three layers (Minified)File xxx-debug.js: Without minificationFile xxx-dev.js: Development distributionThe CSS files under resources/css
Available on CDN: http://cdn.sench.io
ExtJS Class SystemDefining a class
Ext.define(name, properties_and_methods, callback)
Class name must not use Ext as the rootInstantiating 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 SystemExtending a parent
Add extend property to the class definitionEvery class is an extension of Ext.Base
Mixing multiple classesAdd mixins property to the class definition
Each mixed-in class must have a reference nameAccess properties using mixins of the objectThis is a way to implement multiple inheritance
ExtJS Class SystemConfiguration
Add config property to the classSetters and getters are automatically createdCall applyConfig() in the constructor functionPass config values during instantiation
Validating before setting config valueapplyXXX method with a return value
ExtJS Class SystemMaking a singleton
Set property singleton to ‘yes’Class can not be instantiatedNormally used for class configurations
Static MembersAdd statics property to the classAll instances share the same reference to
staticsUse self operator on the objects to access
statics
ExtJS Class SystemDynamic loading
Ext.Loader must be configuredLoader is disabled in ext-all.js
Loading the classUsing Ext.require() functionLoads the class asynchronouslyClass name must match file nameClass namespace must match file path
Using the classWithin the Ext.onReady() functionExecuted only after all the required classes are loaded
DOM Element SelectionExt.Element
Encapsulates the DOM elementExt.CompositElement
Encapsulates a collection of DOM elementsOperations are transmitted to all the elements
withinSelecting elements
Ext.get(id or DOM reference) Returns Ext.Element
Ext.select(selector expression) Returns Ext.CompositElement
DOM ManipulationExt.Element offers several DOM manipulation API
getHTML/setHTML: gets or sets inner HTMLgetAttribute/setAttribute: gets or sets the attribute
valuegetValue/setValue: gets or sets valueappendTo: append this element to the passedappendChild: appends the passed element to selfchild: selects the single direct childcontains: checks if it is the ancestor of the passed oneinsertAfter/insertBefore/insertFirst
Consider using DOMHelper
Style ManipulationExt.Element offers several style manipulation
APIaddCls, hasCls, removeCls, replaceCls,
toggleClsHide and showsetStyle and applyStyles
Event HandlingExt.Element offers event handling APISetting up listener
on(eventName, function(event, htmlElement, options), [scope], [options]);
Shorthand: addListenerA JSON can be used for attaching multiple event
listenersRemoving listener
un(eventName, cbHandler) or removeListenerExt.EventManager can be handyEvent can be inspected for the target and other details
Lab SessionDemonstration: 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.