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




Extensible, object-oriented architecture



Eventing
Dom manipulation
Ajax
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
Inheritance: Example Class Diagram
Observable
Component
Panel
Tab Panel
Window
Menu
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


Full featured chart library



SVG or VML
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
Dom
Manipulation
CSS selector queries
 component rendering
 templates

Event
Management
custom events
 remote functions

Forms
side MVC
Other Components
Trees
 Combo boxes
 Progress Indicators
 Dialogs
 Menus
 etc.

Class
Animation
Keyboard
Client
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 Maura’s blog:

squdgy.wordpress.com
 Joan’s

contact info:
joan.wortman@gmail.com
 Maura’s


contact info
maura@devpartners.com
twitter: @squdgy