Sencha ExtJS 4

1. SenchaExtJS 4 Krishna Mohan Koyya Proprietor and Principal Consultant Glarimy Technology Services krishna@glarimy.com | www.glarimy.com

2. 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

3. 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

4. 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

5. 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

6. 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

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

8. 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

9. 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

10. Exploring SenchaExtJS • 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

11. Exploring SenchaExtJS • 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. Style Manipulation • Ext.Element offers several style manipulation API • addCls, hasCls, removeCls, replaceCls, toggleCls • Hide and show • setStyle and applyStyles

20. 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

21. 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.