intro to sencha ext js 4
Download
Skip this Video
Download Presentation
Intro to Sencha Ext JS 4

Loading in 2 Seconds...

play fullscreen
1 / 15

Intro to Sencha Ext JS 4 - PowerPoint PPT Presentation


  • 58 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
slide3
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