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

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

• 1.
  JavaScript Framework forRich Apps in Every Browser Maura Wilder [email_address] Joan Wortman [email_address]
• 2.
  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
• 3.
  Demo Web DesktopOther sample & demos
• 4.
  Let’s look alittle closer at: Inheritance Layout Management UI Components (aka widgets) The Grid Data Package Charts and Drawing
• 5.
  Inheritance: Example ClassDiagram Component Tab Panel Window Menu Panel draggable resizeable Observable
• 6.
  Inheritance: example codeExt.define('Ext.Window', {      extend: 'Ext.Panel',    … ,      mixins: {          draggable: 'Ext.util.Draggable‘ …      },      config: {          title: “Grid Window"      } });
• 7.
  Layout Management Example
• 8.
  UI Components Outof 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
• 9.
  The Grid Databacked pluggable data stores Configurable features: paging, filtering, progress bar, sorting, cell and row editing, locking, searching, buffered scrolling, ... Customizable data views Plugins
• 10.
  Data Package Modelsand 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
• 11.
  Charts and DrawingPure 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
• 12.
  Sample Drawing Code
• 13.
  Some of theOther 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
• 14.
  Other Sencha ProductsSencha 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
• 15.
  Questions & ContactInfo 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