JavaScript Framework for Rich Apps in Every JavaScript Framework for Rich Apps in Every BrowserBrowser

Maura Wilder maura@devpartners.comJoan Wortman joan.wortman@gmail.com

Characteristics

Mature library (Started as YUI-Ext, 2006)Mature library (Started as YUI-Ext, 2006) True cross-browser supportTrue cross-browser support

EventingEventing Dom manipulationDom manipulation AjaxAjax

Extensible, object-oriented architectureExtensible, object-oriented architecture Inheritance, Multiple Inheritence/Traits Inheritance, Multiple Inheritence/Traits Component pluginsComponent plugins

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

DemoDemo

Web Desktop Other sample & demos

Let’s look a little closer at:Let’s look a little closer at:

InheritanceInheritance Layout ManagementLayout Management UI Components (aka widgets)UI Components (aka widgets) The GridThe Grid Data PackageData Package Charts and DrawingCharts and Drawing

Inheritance: Example Class DiagramInheritance: Example Class Diagram

Component

Tab Panel WindowMenu

Panel

draggableresizeable

Observable

Inheritance: example codeInheritance: example code

Ext.define('Ext.Window', { 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 ManagementLayout Management

Example

UI ComponentsUI Components Out of the box components: Out of the box components:

dialog boxesdialog boxes tree, tree gridtree, tree grid combo box, slidercombo box, slider pickers (date, time, color)pickers (date, time, color) menu, button, toolbar, and tooltipmenu, button, toolbar, and tooltip gridgrid … … and a lot moreand a lot more

Data BindingData Binding Validations, Dirty IndicatorsValidations, Dirty Indicators Drag and DropDrag and Drop

The GridThe Grid

Data backed pluggable data storesData backed pluggable data stores Configurable features: Configurable features:

paging, filtering, progress bar, sorting, cell paging, filtering, progress bar, sorting, cell and row editing, locking, searching, buffered and row editing, locking, searching, buffered scrolling, ...scrolling, ...

Customizable data viewsCustomizable data views PluginsPlugins

Data PackageData Package

Models and Stores to define data formatModels and Stores to define data format DataReaders and DataWriters to populate, and DataReaders and DataWriters to populate, and

update dataupdate data Local (in-page) and Remote (ajax) data accessLocal (in-page) and Remote (ajax) data access Databinding with common components Databinding with common components

(grid/tree/combobox)(grid/tree/combobox) Built in filtering, sorting, groupingBuilt in filtering, sorting, grouping Supports client-side MVCSupports client-side MVC More info on Sencha blog

Examples

Charts and DrawingCharts and Drawing

Pure JavaScript packagesPure JavaScript packages Ext.chart.Chart extends Ext.draw.ComponentExt.chart.Chart extends Ext.draw.Component

SVG or VMLSVG or VML Full featured chart libraryFull featured chart library

Pie, bar, stacked, line …Pie, bar, stacked, line … live updateslive updates

Works using the same data stores as gridsWorks using the same data stores as grids Define the axesDefine the axes Define the seriesDefine the series

Example

Sample Sample Drawing Drawing

CodeCode

Some of the Other StuffSome of the Other StuffDom ManipulationDom Manipulation

CSS selector queriesCSS selector queries component renderingcomponent rendering templatestemplates

Event ManagementEvent Management custom eventscustom events remote functionsremote functions

FormsFormsAnimationAnimationKeyboard SupportKeyboard Support

Client side MVCClient side MVCOther ComponentsOther Components

TreesTrees Combo boxesCombo boxes Progress IndicatorsProgress Indicators DialogsDialogs MenusMenus etc.etc.

Class loaderClass loaderThemingTheming

Other Sencha ProductsOther Sencha Products

Sencha Touch – framework for building – framework for building mobile applications (demo schedule)mobile applications (demo schedule)

Sencha.io – cloud services for mobile – cloud services for mobile Ext Designer – wysiwig tool for Ext JS – wysiwig tool for Ext JS Sencha Animator – tool for designing – tool for designing

CSS3 animationsCSS3 animations Ext GWT – Ext controls available for – Ext controls available for

Google Web ToolkitGoogle Web Toolkit

Questions & Contact InfoQuestions & Contact Info

Any questions?Any questions? Slides will be posted on Maura’s blog:Slides will be posted on Maura’s blog:

squdgy.wordpress.comsqudgy.wordpress.com Joan’s contact info:Joan’s contact info:

joan.wortman@gmail.com Maura’s contact infoMaura’s contact info

maura@devpartners.com twitter: @squdgytwitter: @squdgy