Basics of Ext JS

18,266 views

Published on

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
  • 中文 who know !
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
18,266
On SlideShare
0
From Embeds
0
Number of Embeds
108
Actions
Shares
0
Downloads
769
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Basics of Ext JS

  1. 1. Basics of<br />ExtJS<br />JavaScript Framework<br />ikhwanhayat@gmail.com<br />
  2. 2. (1)INTRODUCTION<br />
  3. 3. What is JavaScript ?<br />Client script, ran at web browser<br />Make web sites interactive and programmable<br />Manipulate page elements<br />DOM manipulations<br />Events<br />&lt;script type=&quot;text/javascript&quot;&gt;<br />alert(&quot;Hello&quot;);<br />&lt;/script&gt;<br />
  4. 4. What are JavaScript Frameworks?<br />Collection of reusable codes to help you code JavaScripts.<br />Better DOM manipulations, eventhandling, etc.<br />
  5. 5. WidgetsUI components like panels, grids, tabs...<br />BasicUseful methods, DOM, event, AJAX...<br />Prototype<br />script.aculo.us<br />jQuery<br />MooTools<br /><ul><li>YUI
  6. 6. Dojo
  7. 7. jQuery UI
  8. 8. Ajax.org
  9. 9. ExtJS
  10. 10. ExtCore</li></li></ul><li>Why Ext JS?<br />Mature and stable.<br />Lots of widgets available.<br />Consistent look and feel (and good lookin’ too!)<br />Good documentation and community support.<br />Backed by a commercial company (but still open source!)<br />
  11. 11. Where?<br />Website: http://www.extjs.com/products/extjs/<br />Samples: http://www.extjs.com/deploy/dev/examples/samples.html<br />Documentation: http://www.extjs.com/deploy/dev/docs/<br />Forums: http://www.extjs.com/forum/<br />Wiki: http://www.extjs.com/learn/Main_Page<br />Screencast: http://www.extjs.tvhttp://www.extjs.com/learn/Screencasts<br />
  12. 12. Download<br />http://www.extjs.com/products/extjs/download.php<br />FREE!<br />
  13. 13. (2)FUNDAMENTALS<br />
  14. 14. Components<br />Buttons, ComboBox, DateField, Slider, Quicktip, Tree, ListView...<br />varbtn = new Ext.Button({<br /> text: ‘Click me!‘,<br /> width: 200,<br /> height: 100<br />});<br />CONFIG OPTIONS<br />
  15. 15. Panel<br />Panel, GridPanel, TabPanel, FormPanel, Window, ...<br />varpnl = new Ext.Panel({<br /> title: &apos;A Panel&apos;,<br /> border: true,<br />tbar: [ &apos;Tool 1&apos; ],<br /> items: [<br /> new Ext.Panel({<br /> title: &apos;A child panel!&apos;<br /> })<br /> ]<br />});<br />
  16. 16. Layout<br />Fit, Border, Form, Accordion, Card<br />http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html<br />
  17. 17. Events<br />varbtn = new Ext.Button({<br /> text: &apos;Click me!&apos;,<br /> width: 200,<br /> height: 100,<br /> listeners: {<br /> &apos;click&apos;: function() {<br /> alert(&apos;Clicked!&apos;);<br /> }<br /> }<br />});<br />btn.on(&apos;mouseover&apos;, function() {<br /> alert(&apos;Hovered!&apos;);<br />});<br />listeners<br />on()<br />handler<br />
  18. 18. Fire up your editor,<br />and let’s get our hand dirty!<br />
  19. 19. We learned...<br />Fundamentals<br />Components,<br />Panel,<br />Layout<br />Common stuff<br />onReady(), <br />config opts, <br />xtype, applyTo,<br />contentEl...<br />Debugging<br />The good ‘olalert()<br />Firebugconsole.log(), console.dir()<br />
  20. 20. (3)WORKING WITH DATA<br />
  21. 21. AJAX - Asychronous JavaScript and XML<br />Clean separation of presentation and data.<br />Thin client which connects to web services.<br />Data encapsulated in JSON/XML<br />&lt;data&gt;<br /> &lt;person&gt;<br /> &lt;name&gt;Ali&lt;/name&gt;<br /> &lt;age&gt;15&lt;/age&gt;<br /> &lt;isCitizen&gt;true&lt;/isCitizen&gt;<br /> &lt;/person&gt;<br />&lt;/data&gt;<br />{<br /> person: {<br /> name: &apos;Ali&apos;,<br /> age: 15,<br />isCitizen: true<br /> }<br />}<br />
  22. 22. JSON/<br />XML<br />Backend<br />WebBrowser<br />WS<br />
  23. 23. Ext.data<br />Store<br />DataReader<br />DataProxy<br />Record<br />
  24. 24. <ul><li>Store manage data
  25. 25. Fetch from a web service, or
  26. 26. using loadData()
  27. 27. Kept as Record</li></ul>JSON/XML<br />Store<br />WS<br />Record<br /><ul><li>UI Components displays the data</li></li></ul><li>Ext.Ajax.request()<br />Wraps XMLHttpRequest to do async request<br />BasicForm.load() and submit()<br />Load and submit form values asynchronously<br />Element.load()<br />Replace content of an element with response<br />from an async request.<br />
  28. 28. Let’s get our hand dirty (again)!<br />
  29. 29. We learned...<br />Separate presentation and data<br />Client and web service<br />How to work with data<br />JsonStore, <br />load(), AJAX, <br />request(),<br />submit()<br />
  30. 30. Next ?<br />Ext.extendInherits existing components and add your own functionality<br />Ext.DirectBetter way to work with web services and remote procedure calls.<br />...other advance stuff<br />
  31. 31. That’s all folks,<br />Thanks for watching!<br />

×