Scribd
Upload
121 views

Javascript Framework For Rich Apps in Every Browser

Ext JS is a JavaScript framework that provides tools for building rich web applications. It has been in development since 2006 and provides cross-browser support through mature libraries. Ext JS uses an object-oriented architecture and includes features like inheritance, Ajax functionality, DOM manipulation and event handling. It also offers many UI widgets like grids, trees and dialog boxes. The framework supports layout management, data binding and validation. Key components include the customizable grid, various data stores and packages, and charting capabilities. Ext JS is extensible and includes other libraries like Touch for mobile development.

Uploaded by

anon_933118175
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
121 views

Javascript Framework For Rich Apps in Every Browser

Ext JS is a JavaScript framework that provides tools for building rich web applications. It has been in development since 2006 and provides cross-browser support through mature libraries. Ext JS uses an object-oriented architecture and includes features like inheritance, Ajax functionality, DOM manipulation and event handling. It also offers many UI widgets like grids, trees and dialog boxes. The framework supports layout management, data binding and validation. Key components include the customizable grid, various data stores and packages, and charting capabilities. Ext JS is extensible and includes other libraries like Touch for mobile development.

Uploaded by

anon_933118175
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 15

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


Eventing Dom manipulation Ajax Inheritance, Multiple Inheritence/Traits Component plugins

Extensible, object-oriented architecture


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

Demo
Web

Desktop Other sample & demos

Lets look a little closer at:


Inheritance

Layout

Management UI Components (aka widgets) The Grid Data Package Charts and Drawing

Inheritance: Example Class Diagram


Component Observable

Panel

Tab Panel

Menu

Window

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

SVG or VML

Full featured chart library


Pie, bar, stacked, line live updates


Define the axes Define the series

Works using the same data stores as grids


Example

Sample Drawing Code

Some of the Other Stuff


Dom

Manipulation

Client

CSS selector queries component rendering templates


Event

side MVC Other Components


Trees Combo boxes Progress Indicators Dialogs Menus etc.

Management

custom events remote functions


Forms Animation Keyboard

Class

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 Mauras blog:

squdgy.wordpress.com

Joans

contact info:
contact info

[email protected]

Mauras

[email protected] twitter: @squdgy

You might also like