Sencha Ext JS 4 Krishna Mohan Koyya Proprietor

Sencha Ext. JS 4 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 �Ext. JS 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 Java. Script, 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. Composite. Element, Ext. Dom. Helper, Ext. Dom. Query � 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, Tab. Panel, Tree Panel, Grid. Panel, Form. Panel

Schedule: Day-3 �Form Components Overview �Checkbox, Combo. Box, Composite. Field, Date. Field, Display. Field, Hidden, Html. Editor, Number. Field, Radio, Slider. Field, Text. Area, Text. Field �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, Mc. Afee, ADP and etc. , �Profile: http: //www. glarimy. com/krishna. php

Schedule: Day-1 � Overview of Java. Script, 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. Composite. Element, Ext. Dom. Helper, Ext. Dom. Query � 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 Ext. JS �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 Ext. JS �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

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

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

Ext. JS Class System �Configuration �Add config property to the class �Setters and getters are automatically created �Call apply. Config() in the constructor function �Pass config values during instantiation �Validating before setting config value �apply. XXX method with a return value

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

Ext. JS 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. on. Ready() function �Executed only after all the required classes are loaded

DOM Element Selection �Ext. Element �Encapsulates the DOM element �Ext. Composit. Element �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. Composit. Element

DOM Manipulation �Ext. Element offers several DOM manipulation API �get. HTML/set. HTML: gets or sets inner HTML �get. Attribute/set. Attribute: gets or sets the attribute value �get. Value/set. Value: gets or sets value �append. To: append this element to the passed �append. Child: appends the passed element to self �child: selects the single direct child �contains: checks if it is the ancestor of the passed one �insert. After/insert. Before/insert. First �Consider using DOMHelper

Style Manipulation �Ext. Element offers several style manipulation API �add. Cls, has. Cls, remove. Cls, replace. Cls, toggle. Cls �Hide and show �set. Style and apply. Styles

Event Handling �Ext. Element offers event handling API �Setting up listener �on(event. Name, function(event, html. Element, options), [scope], [options]); �Shorthand: add. Listener �A JSON can be used for attaching multiple event listeners �Removing listener �un(event. Name, cb. Handler) or remove. Listener �Ext. Event. Manager 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.