Ext JS Overview for: Austin Flex User Group – July 2010
<ul><li>Founder @ Ecor Systems, LLC - Chief Consultant @ Ecor Group Consulting   > Web Systems    > Data Warehousing & Bus...
Sencha makes application frameworks that equip developers to create, deploy and optimize compelling application experience...
Cross-browser  client-side JavaScript  library for RIAs What is Ext JS? Originally built as a YUI extension.  Standalone o...
More UI Examples Layouts, Editors, Forms, Trees, Tabs & Much More!
Why Use Ext JS? <ul><li>Flexible </li></ul><ul><li>Growing Company </li></ul><ul><li>Established Technology (JS) </li></ul...
When to Use Ext JS <ul><li>Prototyping </li></ul><ul><li>Full RIA </li></ul><ul><li>Single Need Widget </li></ul><ul><li>R...
Flex vs Ext JS *JS Minification/Obfuscation Available **CF uses ExtJS Core ECMA-Script base Themes/Skins Native inclusion ...
How it Works Layout Container Container Container
How it Works <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;>  <head> <ti...
Basic Skin Example
Async Example
Async Connectivity var  storeLocales =  new  Ext.data.SimpleStore({ fields: [ 'locale' , 'language' ], data: []   }); var ...
Async Breakdown var  storeLocales =  new  Ext.data.SimpleStore({ fields: [ 'locale' , 'language' ], data: []   }); var   l...
Examples
Questions <ul><li>Extensibility </li></ul><ul><li>Compatibility with other JS Libraries </li></ul><ul><li>Licensing </li><...
Extensibility Custom Object - MyPanel MyApp.MyPanel =  function (config) { MyApp.MyPanel.superclass.constructor.call( this...
Compatibility JQuery Extension <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&...
Resources http://www. sencha .com/deploy/dev/docs/ Icons from http://www. famfamfam .com (Silk) http://www. sencha .com/ f...
More Info @  http://www.sencha.com Send questions to   [email_address]   @goldglovecb, @ecorgroup   http://www.linkedin.co...
Upcoming SlideShare
Loading in...5
×

Ext Js

4,448

Published on

This is a presentation I gave to the Austin Adobe Flex User Group

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

No Downloads
Views
Total Views
4,448
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Ext Js

  1. 1. Ext JS Overview for: Austin Flex User Group – July 2010
  2. 2. <ul><li>Founder @ Ecor Systems, LLC - Chief Consultant @ Ecor Group Consulting > Web Systems > Data Warehousing & Business Intelligence - B.S. Business Computer Systems - 15yrs+ Web Experience Ext JS Apps I’ve Developed: - AssetTracker TM - PostIt! - Sales & Staffing - E-Napkin TM </li></ul>About Me: Corey Butler
  3. 3. Sencha makes application frameworks that equip developers to create, deploy and optimize compelling application experiences using web-standard technologies such as HTML5. The company’s flagship product, Sencha Touch, produces cross-platform rich internet applications for modern mobile devices. The product includes a comprehensive mobile UI widget-set, a well-architected, extensible component model, and an intuitive, easy-to-use API. More than one million developers worldwide — representing more than 150,000 companies — use the Sencha product family to build amazing application experiences. <ul><li>Sencha develops standardized application frameworks </li></ul><ul><li>Sencha Products: </li></ul><ul><li>Sencha Touch (HTML5 Android/iOS devices) </li></ul><ul><li>Ext JS for RAD RIA </li></ul><ul><li>Ext GWT for Java developers/Google Web Toolkit </li></ul><ul><li>Ext Designer , the drag ‘n’ drop IDE </li></ul><ul><li>LABS: </li></ul><ul><ul><li>Connect, an event-driven application server for Ext JS </li></ul></ul><ul><ul><li>jQTouch, the JQuery version of Sencha Touch </li></ul></ul><ul><ul><li>Raphael, a rich SVG vector graphic library </li></ul></ul><ul><li>Ext JS became Sencha in June, 2010. </li></ul><ul><li>Originally backed by Radar Partners (VBulletin) in 2007 </li></ul><ul><li>$14M investment led by Sequoia Capital in 2010 </li></ul><ul><li>1M+ Developers, Vibrant Community </li></ul>
  4. 4. Cross-browser client-side JavaScript library for RIAs What is Ext JS? Originally built as a YUI extension. Standalone or YUI/JQuery/Prototype Extension Customizable/Extensible UI Widgets Available via Google/CacheFly Comparable to Flex/AIR
  5. 5. More UI Examples Layouts, Editors, Forms, Trees, Tabs & Much More!
  6. 6. Why Use Ext JS? <ul><li>Flexible </li></ul><ul><li>Growing Company </li></ul><ul><li>Established Technology (JS) </li></ul><ul><li>Easy Startup </li></ul><ul><li>LGPL 3.0 License </li></ul><ul><li>Low Cost Commercial License </li></ul>
  7. 7. When to Use Ext JS <ul><li>Prototyping </li></ul><ul><li>Full RIA </li></ul><ul><li>Single Need Widget </li></ul><ul><li>Really Basic Content </li></ul>When NOT to Use Ext JS
  8. 8. Flex vs Ext JS *JS Minification/Obfuscation Available **CF uses ExtJS Core ECMA-Script base Themes/Skins Native inclusion in Adobe ColdFusion** Eclipse IDE Available OSS & Commercial Licensing Constructed Binding TCP/IP (AJAX) Interpreted* No Plug-ins Required Modular Native Framework Native Binding AMF/Binary Sockets Compiled Requires Flash Player Single Native Framework Ext JS Flex
  9. 9. How it Works Layout Container Container Container
  10. 10. How it Works <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;> <head> <title> My RIA </title> <link href= &quot; http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css &quot; /> <script src= &quot; http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js &quot;/></script> <script src= &quot; http://extjs.cachefly.net/ext-3.2.1/ext-all.js &quot; ></script> </head> <body> <script src= &quot; myextjsapp.js &quot; ></script> </body> </html> Ext.onReady( function (){ var header = new Ext.Panel({region: 'north' ,html: 'North' ,title: 'Header' }); var main = new Ext.Panel({ region: 'center' , autoLoad: 'mypage.cfm' , title: 'Main‘ }); var left = new Ext.Panel({ region: 'west' , html: 'Left' , width: 300 , title: 'Left' , collapsible: true }); new Ext.Viewport({ layout: 'border' , border: false , defaults: {split: true ,layout: 'fit' ,border: true }, items: [header,left,main], }); }); Basic Layout Basic Functionality
  11. 11. Basic Skin Example
  12. 12. Async Example
  13. 13. Async Connectivity var storeLocales = new Ext.data.SimpleStore({ fields: [ 'locale' , 'language' ], data: [] }); var locrec = new Ext.data.Record.create([ {name: 'locale' ,mapping: 'locale' }, {name: 'language' ,mapping: 'language' } ]); function loadLanguages() { Ext.Ajax.request({ url: 'http://mydomain.com/formprocessor' , params:{get: 'locales' }, success: function (rsp,obj){ l = Ext.decode(rsp.responseText).locales; for ( var i=0;i<l.length;i++) storeLocales.add( new locrec({ locale:l[i].LOCALE, language:l[i].LANGUAGE })); } storeLocales.sort('language'); } }); } loadLanguages(); //Load the data ({ &quot;locales&quot;:[{ &quot;LOCALE&quot;:&quot;ja_jp&quot;, &quot;LANGUAGE&quot;:&quot;Japanese (Japan)“ },{ &quot;LOCALE&quot;:&quot;es_pe&quot;, &quot;LANGUAGE&quot;:&quot;Spanish (Peru)“ },{ &quot;LOCALE&quot;:&quot;en&quot;, &quot;LANGUAGE&quot;:&quot;English“ }] })
  14. 14. Async Breakdown var storeLocales = new Ext.data.SimpleStore({ fields: [ 'locale' , 'language' ], data: [] }); var locrec = new Ext.data.Record.create([ {name: 'locale' ,mapping: 'locale' }, {name: 'language' ,mapping: 'language' } ]); function loadLanguages() { Ext.Ajax.request({ url: 'http://mydomain.com/formprocessor' , params:{get: 'locales' }, success: function (rsp,obj){ l = Ext.decode(rsp.responseText).locales; for ( var i=0;i<l.length;i++) storeLocales.add( new locrec ({ locale:l[i].LOCALE, language:l[i].LANGUAGE })); } storeLocales.sort('language'); } }); } loadLanguages(); //Load the data ({ &quot;locales&quot;:[{ &quot;LOCALE&quot;:&quot;ja_jp&quot;, &quot;LANGUAGE&quot;:&quot;Japanese (Japan)“ },{ &quot;LOCALE&quot;:&quot;es_pe&quot;, &quot;LANGUAGE&quot;:&quot;Spanish (Peru)“ },{ &quot;LOCALE&quot;:&quot;en&quot;, &quot;LANGUAGE&quot;:&quot;English“ }] }) Data stores are bound to components like grids and combo boxes.
  15. 15. Examples
  16. 16. Questions <ul><li>Extensibility </li></ul><ul><li>Compatibility with other JS Libraries </li></ul><ul><li>Licensing </li></ul><ul><li>Common Resources </li></ul><ul><li>Enterprise Use </li></ul><ul><li>Please Ask!!! </li></ul>
  17. 17. Extensibility Custom Object - MyPanel MyApp.MyPanel = function (config) { MyApp.MyPanel.superclass.constructor.call( this , Ext.applyIf(config, { title: ’MyApp Default Title’ , collapsible: true , closable: false , bodyStyle: ’padding:15px; font-weight: bold;’ , … }) ); }; Ext.extend(MyApp.MyPanel, Ext.Panel, { // custom methods go here }); Ext.reg(‘mypanel’, MyApp.MyPanel); Using Custom Object var obj = { xtype: ’mypanel’ title: ‘My Title’ }; OR var obj = new MyApp.MyPanel({ title: ‘My Title’ });
  18. 18. Compatibility JQuery Extension <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;> <head> <title> My RIA </title> <script src=&quot; jquery.js &quot;/></script> <script src= &quot; ext-3.2.1/adapter/jquery/jquery-plugins.js &quot;/></script> <script src= &quot; ext-3.2.1/adapter/jquery/ext-jquery-adapter.js &quot; ></script> <script src= &quot; ext-3.2.1/ext-all.js &quot; ></script> <link href= &quot; ext-3.2.1/resources/css/ext-all.css &quot; /> </head> <body> <script src= &quot; myextjsapp.js &quot; ></script> </body> </html> Usage $(document).ready( function (){ $('#wheelink').bind('click', function () { Ext.Msg.alert( 'Whee alert!' , 'Thanks for clicking me, WHEE!' ); }); });
  19. 19. Resources http://www. sencha .com/deploy/dev/docs/ Icons from http://www. famfamfam .com (Silk) http://www. sencha .com/ forum http://www. sencha .com/ blog JSLint .com (JSON) SPKET (Eclipse Plugin) Firebug for Firefox
  20. 20. More Info @ http://www.sencha.com Send questions to [email_address] @goldglovecb, @ecorgroup http://www.linkedin.com/in/ecorsystems http://www.facebook.com/goldglovecb http://www.facebook.com/ecorgroup Open Source Example Apps (Require ColdFusion): http:// open.ecorgroup.com /surveymanager http:// open.ecorgroup.com /assettracker

×