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 Inheritance, Multiple Inheritence/Traits Component plugins

Extensible, object-oriented architecture

Feature-rich UI widgets (grid, tree etc.) Complete data package

Demo
Web

Desktop Other sample & demos

Lets look a little closer at:

Inheritance

Layout

Management UI Components (aka widgets) The Grid Data Package Charts and Drawing

Inheritance: Example Class Diagram

Component Observable

Panel

Tab Panel

Menu

Window

resizeable

draggable

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 Plugins

data views

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

Define the axes Define the series

Works using the same data stores as grids

Example

Sample Drawing Code

Some of the Other Stuff

Dom

Manipulation

Client

CSS selector queries component rendering templates

Event

side MVC Other Components

Trees Combo boxes Progress Indicators Dialogs Menus etc.

Management

custom events remote functions

Forms Animation Keyboard

Class

Support

loader Theming

Other Sencha Products

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
Sencha

Questions & Contact Info

Any

questions? Slides will be posted on Mauras blog:

squdgy.wordpress.com

Joans

contact info:
contact info

joan.wortman@gmail.com

Mauras

maura@devpartners.com twitter: @squdgy