Ext Js
3 likes2,471 views
Ext JS is a JavaScript application framework for building data-driven web applications. It includes components for layout, forms, grids, trees and more. Sencha develops Ext JS and other JavaScript frameworks. Ext JS applications can be built using standard web technologies like HTML and AJAX calls, and provide a rich internet application experience.
![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](https://image.slidesharecdn.com/extjs-100716082614-phpapp01/85/Ext-Js-10-320.jpg)
![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“ }] })](https://image.slidesharecdn.com/extjs-100716082614-phpapp01/85/Ext-Js-13-320.jpg)
![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.](https://image.slidesharecdn.com/extjs-100716082614-phpapp01/85/Ext-Js-14-320.jpg)
![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](https://image.slidesharecdn.com/extjs-100716082614-phpapp01/85/Ext-Js-20-320.jpg)
Ext Js
- 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="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
- 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="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