Introduction to the ExtJS Javascript framework for rich apps in every browser
Upcoming SlideShare
Loading in...5
×
 

Introduction to the ExtJS Javascript framework for rich apps in every browser

on

  • 4,170 views

Overview of Sencha ExtJS talk given at Vermont Code Camp 3, 2011 by Maura Wilder and Joan Wortman

Overview of Sencha ExtJS talk given at Vermont Code Camp 3, 2011 by Maura Wilder and Joan Wortman

Statistics

Views

Total Views
4,170
Views on SlideShare
4,158
Embed Views
12

Actions

Likes
0
Downloads
71
Comments
0

4 Embeds 12

https://twitter.com 5
http://www.linkedin.com 4
http://www.slashdocs.com 2
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • http://dev.sencha.com/deploy/ext-4.0.2a/examples/desktop/desktop.html http://dev.sencha.com/deploy/ext-4.0.2a/examples/sandbox/sandbox.html
  • Layout Browser http://dev.sencha.com/deploy/ext-4.0.2a/examples/layout-browser/layout-browser.html
  • Grids http://www.sencha.com/products/extjs/examples/#sample-2
  • Charts http://www.sencha.com/products/extjs/examples/#sample-3 Drawing http://www.sencha.com/products/extjs/examples/#sample-8
  • Touch http://www.sencha.com/products/touch/ Designer http://www.sencha.com/products/designer/ IO http://www.sencha.com/products/io/ GWT http://www.sencha.com/products/extgwt/

Introduction to the ExtJS Javascript framework for rich apps in every browser Introduction to the ExtJS Javascript framework for rich apps in every browser Presentation Transcript

  • JavaScript Framework for Rich Apps in Every Browser Maura Wilder [email_address] Joan Wortman [email_address]
  • 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:
      • [email_address]
    • Maura’s contact info
      • [email_address]
      • twitter: @squdgy