JavaScript Framework for Rich Apps in Every Browser Maura Wilder Joan Wortman

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

Demo  Web Desktop Web Desktop Web Desktop  Other sample & demos Other sample & demos Other sample & demos

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

Inheritance: Example Class Diagram Component Tab Panel Window Menu Panel draggableresizeable Observable

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

Layout Management Example

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

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

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 More info on Sencha blog More info on Sencha blog  Examples Examples

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

Sample Drawing Code

Some of the Other Stuff  Dom Manipulation CSS selector queries CSS selector queries component rendering component rendering templates templates  Event Management custom events custom events remote functions remote functions  Forms  Animation  Keyboard Support  Client side MVC  Other Components Trees Trees Combo boxes Combo boxes Progress Indicators Progress Indicators Dialogs Dialogs Menus Menus etc. etc.  Class loader  Theming

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

Questions & Contact Info  Any questions?  Slides will be posted on Maura’s blog: squdgy.wordpress.com squdgy.wordpress.com  Joan’s contact info:  Maura’s contact info