Presentation is loading. Please wait.

Presentation is loading. Please wait.

Krishna Mohan Koyya Proprietor and Principal Consultant Glarimy Technology Services |

Similar presentations


Presentation on theme: "Krishna Mohan Koyya Proprietor and Principal Consultant Glarimy Technology Services |"— Presentation transcript:

1 Krishna Mohan Koyya Proprietor and Principal Consultant Glarimy Technology Services |

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 for referenceshttp://www.glarimy.com/files/extjs Visit for code sampleshttp://www.glarimy.com Timings: Breaks: , and

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:

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

11 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:

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 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 ppt "Krishna Mohan Koyya Proprietor and Principal Consultant Glarimy Technology Services |"

Similar presentations


Ads by Google