JavaScript Framework for Rich Apps in Every Browser

sprocketexponentialΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 7 μήνες)

52 εμφανίσεις

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

Inheritance:
Example Class
Diagram

Component

Tab Panel

Window

Menu

Panel

draggable

resizeable

Observable

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


Dom Manipulation



CSS selector queries



component rendering



templates


Event Management



custom events



remote functions


Forms


Animation


Keyboard Support


Client side MVC


Other Components



Trees



Combo boxes



Progress Indicators



Dialogs



Menus



etc.


Class loader


Theming


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