Intro to Sencha Ext JS 4
Download
Report
Transcript Intro to Sencha Ext JS 4
JavaScript Framework for Rich Apps in Every
Browser
Maura Wilder [email protected]
Joan Wortman [email protected]
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:
[email protected]
Maura’s
contact info
[email protected]
twitter: @squdgy