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 • Extensible, object-oriented architecture • Inheritance, Multiple Inheritence/Traits • Component plugins • Feature-rich UI widgets (grid, tree etc.) • Complete data package

Demo • Web Desktop • Other sample & demos

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

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

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

Layout Management Example

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

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

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

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

Sample Drawing Code

Some of the Other Stuff

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

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

Intro to Sencha Ext JS 4