Professional Documents
Culture Documents
Ext
JS
JavaScript
Framework
ikhwanhayat@gmail.com
(1)
INTRODUCTION
What is JavaScript ?
Basic
Widgets
Prototype
script.aculo
.us
jQuery
MooTools
Ext Core
Useful methods,
DOM, event, AJAX...
UI components like
panels, grids, tabs...
YUI
Dojo
jQuery UI
Ajax.org
Ext JS
Why Ext JS ?
Where ?
Website:
http://www.extjs.com/products/extjs/
Samples:
http://www.extjs.com/deploy/dev/examples/samples.ht
ml
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.tv
http://www.extjs.com/learn/Screencasts
Download
http://www.extjs.com/p
roducts/extjs/download
.php
E
R
F
E!
(2)
FUNDAMENTALS
Components
Buttons, ComboBox,
DateField, Slider, Quicktip,
Tree, ListView...
Panel
Layout
Fit, Border,
Form,
Accordion, Card
http://www.extjs.com/deploy/dev/
examples/layout-browser/layout-b
rowser.html
Events
listeners
on()
handler
W
e
Fundamental
sComponents,
Common
Panel,
stuf
Layout
Debugging
le
ar
ne
d.
..
onReady(),
config opts,
xtype, applyTo,
contentEl...
(3)
WORKING WITH DATA
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>
JSON/
XML
Backend
W
S
Web
Browser
Ext.data
Store
DataReader
DataProxy
Record
using loadData()
Kept as Record
W
S
JSON/XML
Stor
e
Record
UI Components displays
the data
Ext.Ajax.request()
Wraps XMLHttpRequest to do async
request
BasicForm.load()
and
submit()
Element.load()
Replace content of an element with response
from an async request.
W
e
Separate
presentation
and data
Client and
web
service
le
ar
How to work
with data
JsonStore,
load(), AJAX,
request(),
submit()
ne
d.
..
Next ?
Ext.extend
Inherits existing components and add
your own functionality
Ext.Direct
Better way to work with web services
and remote procedure calls.