1 / 15

Intro to Sencha Ext JS 4

Intro to Sencha Ext JS 4. JavaScript Framework for Rich Apps in Every Browser. Maura Wilder maura@devpartners.com Joan Wortman joan.wortman@gmail.com. Characteristics. Mature library (Started as YUI-Ext, 2006) True cross-browser support Eventing Dom manipulation Ajax

claude
Download Presentation

Intro to Sencha Ext JS 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. Intro to Sencha Ext JS 4 JavaScript Framework for Rich Apps in Every Browser Maura Wilder maura@devpartners.com Joan Wortman joan.wortman@gmail.com

  2. Characteristics • Mature library (Started as YUI-Ext, 2006) • True cross-browser support • Eventing • Dom manipulation • Ajax • Extensible, object-oriented architecture • Inheritance, Multiple Inheritence/Traits • Component plugins • Feature-rich UI widgets (grid, tree etc.) • Complete data package

  3. Demo • Web Desktop • Other sample & demos

  4. Let’s look a little closer at: • Inheritance • Layout Management • UI Components (aka widgets) • The Grid • Data Package • Charts and Drawing

  5. Component Observable Panel Tab Panel Window Menu resizeable draggable Inheritance: Example Class Diagram

  6. Inheritance: example code Ext.define('Ext.Window', {     extend: 'Ext.Panel',    …, mixins: { draggable: 'Ext.util.Draggable‘ …     }, config: {         title: “Grid Window"     } });

  7. Layout Management Example

  8. UI Components • Out of the box components: • dialog boxes • tree, tree grid • combo box, slider • pickers (date, time, color) • menu, button, toolbar, and tooltip • grid • … and a lot more • Data Binding • Validations, Dirty Indicators • Drag and Drop

  9. The Grid • Data backed pluggable data stores • Configurable features: • paging, filtering, progress bar, sorting, cell and row editing, locking, searching, buffered scrolling, ... • Customizable data views • Plugins

  10. Data Package • Models and Stores to define data format • DataReaders and DataWriters to populate, and update data • Local (in-page) and Remote (ajax) data access • Databinding with common components (grid/tree/combobox) • Built in filtering, sorting, grouping • Supports client-side MVC • More info on Sencha blog • Examples

  11. Charts and Drawing • Pure JavaScript packages • Ext.chart.Chart extends Ext.draw.Component • SVG or VML • Full featured chart library • Pie, bar, stacked, line … • live updates • Works using the same data stores as grids • Define the axes • Define the series Example

  12. Sample Drawing Code

  13. Some of the Other Stuff

  14. Other Sencha Products • Sencha Touch – framework for building mobile applications (demo schedule) • Sencha.io – cloud services for mobile • Ext Designer – wysiwig tool for Ext JS • Sencha Animator – tool for designing CSS3 animations • Ext GWT – Ext controls available for Google Web Toolkit

  15. Questions & Contact Info • Any questions? • Slides will be posted on Maura’s blog: • squdgy.wordpress.com • Joan’s contact info: • joan.wortman@gmail.com • Maura’s contact info • maura@devpartners.com • twitter: @squdgy

More Related