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