1 / 21

Sencha ExtJS 4

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

bell
Download Presentation

Sencha ExtJS 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related