Ext Js
•
3 gostaram•2,469 visualizações
This is a presentation I gave to the Austin Adobe Flex User Group
![[object Object],About Me: Corey Butler](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (19)
Destaque
Destaque (18)
Semelhante a Ext Js
Semelhante a Ext Js (20)
Último
Último (20)
Ext Js
- 1. Ext JS Overview for: Austin Flex User Group – July 2010
- 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!
- 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="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> My RIA </title> <link href= " http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css " /> <script src= " http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js "/></script> <script src= " http://extjs.cachefly.net/ext-3.2.1/ext-all.js " ></script> </head> <body> <script src= " myextjsapp.js " ></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
- 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 ({ "locales":[{ "LOCALE":"ja_jp", "LANGUAGE":"Japanese (Japan)“ },{ "LOCALE":"es_pe", "LANGUAGE":"Spanish (Peru)“ },{ "LOCALE":"en", "LANGUAGE":"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 ({ "locales":[{ "LOCALE":"ja_jp", "LANGUAGE":"Japanese (Japan)“ },{ "LOCALE":"es_pe", "LANGUAGE":"Spanish (Peru)“ },{ "LOCALE":"en", "LANGUAGE":"English“ }] }) Data stores are bound to components like grids and combo boxes.
- 15. Examples
- 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="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> My RIA </title> <script src=" jquery.js "/></script> <script src= " ext-3.2.1/adapter/jquery/jquery-plugins.js "/></script> <script src= " ext-3.2.1/adapter/jquery/ext-jquery-adapter.js " ></script> <script src= " ext-3.2.1/ext-all.js " ></script> <link href= " ext-3.2.1/resources/css/ext-all.css " /> </head> <body> <script src= " myextjsapp.js " ></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