Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript Framework for Rich Apps in Every Browser Maura Wilder  [email_address] Joan Wortman  [email_address]
Characteristics <ul><li>Mature library (Started as YUI-Ext, 2006) </li></ul><ul><li>True cross-browser support </li></ul><...
Demo <ul><li>Web Desktop </li></ul><ul><li>Other sample & demos </li></ul>
Let’s look a little closer at: <ul><li>Inheritance </li></ul><ul><li>Layout Management </li></ul><ul><li>UI Components (ak...
Inheritance: Example Class Diagram Component Tab Panel Window Menu Panel draggable resizeable Observable
Inheritance: example code <ul><li>Ext.define('Ext.Window', {  </li></ul><ul><li>     extend: 'Ext.Panel',  </li></ul><ul><...
Layout Management Example
UI Components <ul><li>Out of the box components:  </li></ul><ul><ul><li>dialog boxes </li></ul></ul><ul><ul><li>tree, tree...
The Grid <ul><li>Data backed pluggable data stores </li></ul><ul><li>Configurable features:  </li></ul><ul><ul><li>paging,...
Data Package <ul><li>Models and Stores to define data format </li></ul><ul><li>DataReaders and DataWriters to populate, an...
Charts and Drawing <ul><li>Pure JavaScript packages </li></ul><ul><li>Ext.chart.Chart extends Ext.draw.Component </li></ul...
Sample Drawing Code
Some of the Other Stuff <ul><li>Dom Manipulation </li></ul><ul><ul><li>CSS selector queries </li></ul></ul><ul><ul><li>com...
Other Sencha Products <ul><li>Sencha Touch  – framework for building mobile applications  (demo schedule) </li></ul><ul><l...
Questions & Contact Info <ul><li>Any questions? </li></ul><ul><li>Slides will be posted on Maura’s blog: </li></ul><ul><ul...
Upcoming SlideShare
Loading in …5
×

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

5,764 views

Published on

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

Published in: Technology
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

  1. 1. JavaScript Framework for Rich Apps in Every Browser Maura Wilder [email_address] Joan Wortman [email_address]
  2. 2. Characteristics <ul><li>Mature library (Started as YUI-Ext, 2006) </li></ul><ul><li>True cross-browser support </li></ul><ul><ul><li>Eventing </li></ul></ul><ul><ul><li>Dom manipulation </li></ul></ul><ul><ul><li>Ajax </li></ul></ul><ul><li>Extensible, object-oriented architecture </li></ul><ul><ul><li>Inheritance, Multiple Inheritence/Traits </li></ul></ul><ul><ul><li>Component plugins </li></ul></ul><ul><li>Feature-rich UI widgets (grid, tree etc.) </li></ul><ul><li>Complete data package </li></ul>
  3. 3. Demo <ul><li>Web Desktop </li></ul><ul><li>Other sample & demos </li></ul>
  4. 4. Let’s look a little closer at: <ul><li>Inheritance </li></ul><ul><li>Layout Management </li></ul><ul><li>UI Components (aka widgets) </li></ul><ul><li>The Grid </li></ul><ul><li>Data Package </li></ul><ul><li>Charts and Drawing </li></ul>
  5. 5. Inheritance: Example Class Diagram Component Tab Panel Window Menu Panel draggable resizeable Observable
  6. 6. Inheritance: example code <ul><li>Ext.define('Ext.Window', { </li></ul><ul><li>     extend: 'Ext.Panel', </li></ul><ul><li>   … , </li></ul><ul><li>     mixins: { </li></ul><ul><li>         draggable: 'Ext.util.Draggable‘ </li></ul><ul><li>… </li></ul><ul><li>     }, </li></ul><ul><li>     config: { </li></ul><ul><li>         title: “Grid Window&quot; </li></ul><ul><li>     } </li></ul><ul><li>}); </li></ul>
  7. 7. Layout Management Example
  8. 8. UI Components <ul><li>Out of the box components: </li></ul><ul><ul><li>dialog boxes </li></ul></ul><ul><ul><li>tree, tree grid </li></ul></ul><ul><ul><li>combo box, slider </li></ul></ul><ul><ul><li>pickers (date, time, color) </li></ul></ul><ul><ul><li>menu, button, toolbar, and tooltip </li></ul></ul><ul><ul><li>grid </li></ul></ul><ul><ul><li>… and a lot more </li></ul></ul><ul><li>Data Binding </li></ul><ul><li>Validations, Dirty Indicators </li></ul><ul><li>Drag and Drop </li></ul>
  9. 9. The Grid <ul><li>Data backed pluggable data stores </li></ul><ul><li>Configurable features: </li></ul><ul><ul><li>paging, filtering, progress bar, sorting, cell and row editing, locking, searching, buffered scrolling, ... </li></ul></ul><ul><li>Customizable data views </li></ul><ul><li>Plugins </li></ul>
  10. 10. Data Package <ul><li>Models and Stores to define data format </li></ul><ul><li>DataReaders and DataWriters to populate, and update data </li></ul><ul><li>Local (in-page) and Remote (ajax) data access </li></ul><ul><li>Databinding with common components (grid/tree/combobox) </li></ul><ul><li>Built in filtering, sorting, grouping </li></ul><ul><li>Supports client-side MVC </li></ul><ul><li>More info on Sencha blog </li></ul><ul><li>Examples </li></ul>
  11. 11. Charts and Drawing <ul><li>Pure JavaScript packages </li></ul><ul><li>Ext.chart.Chart extends Ext.draw.Component </li></ul><ul><ul><li>SVG or VML </li></ul></ul><ul><li>Full featured chart library </li></ul><ul><ul><li>Pie, bar, stacked, line … </li></ul></ul><ul><ul><li>live updates </li></ul></ul><ul><li>Works using the same data stores as grids </li></ul><ul><ul><li>Define the axes </li></ul></ul><ul><ul><li>Define the series </li></ul></ul>Example
  12. 12. Sample Drawing Code
  13. 13. Some of the Other Stuff <ul><li>Dom Manipulation </li></ul><ul><ul><li>CSS selector queries </li></ul></ul><ul><ul><li>component rendering </li></ul></ul><ul><ul><li>templates </li></ul></ul><ul><li>Event Management </li></ul><ul><ul><li>custom events </li></ul></ul><ul><ul><li>remote functions </li></ul></ul><ul><li>Forms </li></ul><ul><li>Animation </li></ul><ul><li>Keyboard Support </li></ul><ul><li>Client side MVC </li></ul><ul><li>Other Components </li></ul><ul><ul><li>Trees </li></ul></ul><ul><ul><li>Combo boxes </li></ul></ul><ul><ul><li>Progress Indicators </li></ul></ul><ul><ul><li>Dialogs </li></ul></ul><ul><ul><li>Menus </li></ul></ul><ul><ul><li>etc. </li></ul></ul><ul><li>Class loader </li></ul><ul><li>Theming </li></ul>
  14. 14. Other Sencha Products <ul><li>Sencha Touch – framework for building mobile applications (demo schedule) </li></ul><ul><li>Sencha.io – cloud services for mobile </li></ul><ul><li>Ext Designer – wysiwig tool for Ext JS </li></ul><ul><li>Sencha Animator – tool for designing CSS3 animations </li></ul><ul><li>Ext GWT – Ext controls available for Google Web Toolkit </li></ul>
  15. 15. Questions & Contact Info <ul><li>Any questions? </li></ul><ul><li>Slides will be posted on Maura’s blog: </li></ul><ul><ul><li>squdgy.wordpress.com </li></ul></ul><ul><li>Joan’s contact info: </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>Maura’s contact info </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>twitter: @squdgy </li></ul></ul>

×