Intro to sencha ext js 4
Download
1 / 15

Intro to Sencha Ext JS 4 - PowerPoint PPT Presentation


  • 56 Views
  • Uploaded on

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 Eventing Dom manipulation Ajax

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Intro to Sencha Ext JS 4' - miranda-gardner


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Intro to sencha ext js 4

Intro to Sencha Ext JS 4

JavaScript Framework for Rich Apps in Every Browser

Maura Wilder [email protected]

Joan Wortman [email protected]


Characteristics
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
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

Observable

Panel

Tab Panel

Window

Menu

resizeable

draggable

Inheritance: Example Class Diagram


Inheritance example code
Inheritance: example code

Ext.define('Ext.Window', {

    extend: 'Ext.Panel',

   …,

mixins: {

draggable: 'Ext.util.Draggable‘

    },

config: {

        title: “Grid Window"

    }

});



Ui components
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
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
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
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




Other sencha products
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
Questions & Contact Info


ad