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

3. Demo  Web Desktop Web Desktop Web Desktop  Other sample & demos Other sample & demos 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. Inheritance: Example Class Diagram Component Tab Panel Window Menu Panel draggableresizeable Observable

6. 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" }});

7. Layout Management Example

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

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

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

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

12. Sample Drawing Code

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

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

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