JavaScript Framework for Rich Apps in Every JavaScript Framework for Rich Apps in Every BrowserBrowser
Maura Wilder [email protected] Wortman [email protected]
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
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" } } });});
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:
[email protected] Maura’s contact infoMaura’s contact info
[email protected] twitter: @squdgytwitter: @squdgy