Scribd
Upload
66 views25 pages

Basics of

This document introduces Ext JS, a JavaScript framework. It discusses that Ext JS provides reusable code to help with DOM manipulation, events, and other JavaScript tasks. It also includes many pre-built widgets like panels, grids and tabs. The document recommends Ext JS because it is mature, has many widgets, a consistent look and feel, good documentation, and commercial support. It then covers Ext JS fundamentals like components, panels, layouts, and events. Finally, it discusses working with asynchronous data using AJAX, JSON, XML, and Ext JS classes like Store and Record.

Uploaded by

Murugan Sanjay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
66 views25 pages

Basics of

This document introduces Ext JS, a JavaScript framework. It discusses that Ext JS provides reusable code to help with DOM manipulation, events, and other JavaScript tasks. It also includes many pre-built widgets like panels, grids and tabs. The document recommends Ext JS because it is mature, has many widgets, a consistent look and feel, good documentation, and commercial support. It then covers Ext JS fundamentals like components, panels, layouts, and events. Finally, it discusses working with asynchronous data using AJAX, JSON, XML, and Ext JS classes like Store and Record.

Uploaded by

Murugan Sanjay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Basics of

Ext
JS
JavaScript
Framework
[email protected]

(1)
INTRODUCTION

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>

What are JavaScript


Frameworks ?
Collection of reusable
codes to help you code
JavaScripts.
Better DOM
manipulations, event
handling, etc.

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 ?

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!)

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...

var btn = new Ext.Button({


text: Click me!,
width: 200,
CON
height: 100
FIG
O
PTI
});
ONS

Panel

Panel, 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!'
})
]
});

Layout
Fit, Border,
Form,
Accordion, Card

http://www.extjs.com/deploy/dev/
examples/layout-browser/layout-b
rowser.html

Events
listeners
on()
handler

var btn = new Ext.Button({


text: 'Click me!',
width: 200,
height: 100,
listeners: {
'click': function() {
alert('Clicked!');
}
}
});
btn.on('mouseover', function() {
alert('Hovered!');
});

Fire up your editor,

and lets get our


hand dirty!

W
e
Fundamental
sComponents,
Common
Panel,
stuf
Layout

Debugging

le
ar

ne
d.
..

onReady(),
config opts,
xtype, applyTo,
contentEl...

The good ol alert()


Firebug console.log(),
console.dir()

(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

Store manage data

Fetch from a web


service, or

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()

Load and submit form values


asynchronously

Element.load()
Replace content of an element with response
from an async request.

Lets get our hand


dirty (again)!

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.

...other advance stuf

Thats all folks,


Thanks for
watching!

You might also like