Your SlideShare is downloading. ×
  • Like
  • Save
Ext Js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ext Js

  • 4,149 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,149
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Ext JS Overview for: Austin Flex User Group – July 2010
  • 2.
    • 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
    About Me: Corey Butler
  • 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.
    • Sencha develops standardized application frameworks
    • Sencha Products:
    • Sencha Touch (HTML5 Android/iOS devices)
    • Ext JS for RAD RIA
    • Ext GWT for Java developers/Google Web Toolkit
    • Ext Designer , the drag ‘n’ drop IDE
    • LABS:
      • Connect, an event-driven application server for Ext JS
      • jQTouch, the JQuery version of Sencha Touch
      • Raphael, a rich SVG vector graphic library
    • Ext JS became Sencha in June, 2010.
    • Originally backed by Radar Partners (VBulletin) in 2007
    • $14M investment led by Sequoia Capital in 2010
    • 1M+ Developers, Vibrant Community
  • 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. More UI Examples Layouts, Editors, Forms, Trees, Tabs & Much More!
  • 6. Why Use Ext JS?
    • Flexible
    • Growing Company
    • Established Technology (JS)
    • Easy Startup
    • LGPL 3.0 License
    • Low Cost Commercial License
  • 7. When to Use Ext JS
    • Prototyping
    • Full RIA
    • Single Need Widget
    • Really Basic Content
    When NOT to Use Ext JS
  • 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. How it Works Layout Container Container Container
  • 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. Basic Skin Example
  • 12. Async Example
  • 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. 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. Examples
  • 16. Questions
    • Extensibility
    • Compatibility with other JS Libraries
    • Licensing
    • Common Resources
    • Enterprise Use
    • Please Ask!!!
  • 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. 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. 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. 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