![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)
Uploaded byCorey Butler
Ext Js
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.
More Related Content
Ext Js
- 1. Ext JS Overviewfor: Austin Flex User Group – July 2010
- 2. Founder @ EcorSystems, 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 applicationframeworks 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-sideJavaScript 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 ExamplesLayouts, Editors, Forms, Trees, Tabs & Much More!
- 6. Why Use ExtJS? Flexible Growing Company Established Technology (JS) Easy Startup LGPL 3.0 License Low Cost Commercial License
- 7. When to UseExt JS Prototyping Full RIA Single Need Widget Really Basic Content When NOT to Use Ext JS
- 8. Flex vs ExtJS *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 WorksLayout 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
- 11.
- 12.
- 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.
- 16. Questions Extensibility Compatibilitywith 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