Extjs Howto

8,215 views

Published on

Introduction to Extjs as given at UTOSC 2008 http://2008.utosc.com/presentation/68/

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,215
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
359
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Extjs Howto

  1. 1. Creating Wicked Cool Web UI (With Minimal Pain, Suffering, and Hair Loss) Using Ext JS Authored by Gregary Hendricks Novell IS&T Application Engineer Bugzilla and Testopia Person (and all around nice guy)
  2. 2. The Journey Begins <ul><li>Testopia Project </li></ul><ul><li>Ajax? Isn't that a cleaner? </li></ul><ul><li>Dojo has the moves, teach me Sensei </li></ul><ul><li>Ummm, then again... </li></ul><ul><ul><li>Docs anyone? </li></ul></ul><ul><ul><li>This is going to take how long to load? </li></ul></ul>
  3. 3. Step 1 <ul><li>Learn Javascript </li></ul><ul><ul><li>Javascript != Java </li></ul></ul><ul><ul><li>Javascript ≈ Perl (or Ruby, Python, Lisp etc.) </li></ul></ul><ul><li>Douglas Crockford is the man! </li></ul><ul><ul><li>“The JavaScript Programming Language” series available on YUI Theater </li></ul></ul><ul><ul><li>“Javascript: The Good Parts” from O'Reilly </li></ul></ul>
  4. 4. Step 2 <ul><li>Set up your development environment </li></ul><ul><ul><li>Develop in a real browser (Firefox) </li></ul></ul><ul><ul><li>FIREBUG RULES!!! </li></ul></ul><ul><ul><li>I use Eclipse + Aptana </li></ul></ul><ul><ul><li>Rockstar Apps plugin for managing your JS files </li></ul></ul><ul><ul><ul><li>Concats and minifies while maintaining load order </li></ul></ul></ul><ul><ul><ul><li>http://www.rockstarapps.com/ </li></ul></ul></ul>
  5. 5. The Legal Stuff <ul><li>Ext JS is GPL 3 </li></ul><ul><ul><li>Notice I said GPL, not LGPL </li></ul></ul><ul><ul><li>Used to be LGPL... sortof </li></ul></ul><ul><li>Dual Licensed </li></ul><ul><ul><li>“Quid Pro Quo” </li></ul></ul><ul><ul><li>Purchase developer licenses for commercial applications </li></ul></ul>
  6. 6. Getting Ext JS <ul><li>Download: http://extjs.com/products/extjs/download.php </li></ul><ul><li>Unzip it somewhere your web server can get it </li></ul>
  7. 7. Including Stuff <html> <head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;path/to/extjs/resources/css/ext-all.css&quot; /> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;path/to/extjs/resources/css/xtheme-default.css&quot; /> <script type=&quot;text/javascript&quot; src=&quot;path/to/extjs/adapter/ext/ext-base.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;path/to/extjs/ext-all.js&quot;></script> ...
  8. 8. Themes <ul><li>Two available out of the box </li></ul><ul><ul><li>Default </li></ul></ul><ul><ul><li>Gray </li></ul></ul><ul><li>Others available on the web or create your own </li></ul>
  9. 9. Adapters <ul><li>Default is Ext base </li></ul><ul><li>Others available </li></ul><ul><ul><li>Jquery </li></ul></ul><ul><ul><li>Prototype </li></ul></ul><ul><ul><li>YUI </li></ul></ul>
  10. 10. Minified vs. Debug <ul><li>ext-all.js is minified </li></ul><ul><ul><li>Boosts performance, but ... </li></ul></ul><ul><ul><li>difficult to debug </li></ul></ul><ul><ul><li>Error on line 1 char 139887 </li></ul></ul><ul><li>Use ext-all-debug.js while developing </li></ul><ul><ul><li>Consider an admin setting for Deployment vs development </li></ul></ul>
  11. 11. Getting Down And Dirty <ul><li>Ext.onReady() </li></ul><ul><ul><li>Executes “when the page is darned good and ready” </li></ul></ul><ul><ul><li>Not the same as <body onload> </li></ul></ul><script type=”text/javascript”> Ext.onReady(function(){ // do some stuff }); </script>
  12. 12. Layouts, Components, and Containers (oh, my!) <ul><li>Containers </li></ul><ul><ul><li>Viewport, Window, or Panel (TabPanel, GridPanel and various other xPanels) </li></ul></ul><ul><li>Layouts </li></ul><ul><ul><li>Fit, Border, Accordion, etc </li></ul></ul><ul><li>Components </li></ul><ul><ul><li>Widgets </li></ul></ul>
  13. 13. Widgets, Widgets, Widgets <ul><li>Grids </li></ul><ul><li>Trees </li></ul><ul><li>Forms </li></ul><ul><li>Menus </li></ul><ul><li>Toolbars </li></ul><ul><li>Buttons </li></ul><ul><li>State Manager </li></ul><ul><li>Windows </li></ul><ul><li>Data stores </li></ul><ul><li>Drag and Drop </li></ul>
  14. 14. Some Examples
  15. 15. (Hyper)Extending <ul><li>Ext.extend </li></ul><ul><ul><li>Allows you to customize any widget </li></ul></ul><ul><ul><li>Easy code resuse </li></ul></ul><ul><ul><li>Example: UserLookup </li></ul></ul>
  16. 16. Building With Style <ul><li>XTemplate </li></ul><ul><ul><li>Allows you to define look and feel for any component </li></ul></ul><ul><li>applyStyle </li></ul><ul><li>removeStyle </li></ul><ul><li>Icons </li></ul>
  17. 17. Tips and Tricks <ul><li>ALWAYS DEFINE AN ID! </li></ul><ul><li>Items array and xtype </li></ul><ul><li>tbar, bbar </li></ul><ul><li>listeners </li></ul><ul><li>Be sneaky, but only when you have to </li></ul><ul><ul><li>Updating “private” properties etc. </li></ul></ul>
  18. 18. Where to Next? <ul><li>Docs </li></ul><ul><li>Forums </li></ul><ul><li>Examples </li></ul><ul><li>Tutorials </li></ul><ul><li>Paid support? </li></ul>

×