Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Save to My Library
Look up keyword
Like this
10Activity
0 of .
Results for:
No results containing your search query
P. 1
Extjs English - Step by step phonebook application

Extjs English - Step by step phonebook application

Ratings: (0)|Views: 4,650 |Likes:
Published by Vladica Savic
ExtJS tutorial with step by step example of a Phonebook application.
ExtJS tutorial with step by step example of a Phonebook application.

More info:

Published by: Vladica Savic on Nov 28, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

04/08/2013

pdf

text

original

 
 ExtJS Tutorial
ExtJS
is a cross-browser JavaScript library, that helps you creating
web2.0
applications, using different techniques like
AJAX
,
DHTML
and
DOM
scripting.
ExtJS
includes various
GUI
(Graphic User Interface) controls or so called w
idgets
, that can be used in web applications, like
Text Field 
,
Text Area
,
Date Field 
,
List Box 
,
Combo Box 
,
Radio Box 
,
Check Box 
,
HTML Editor 
,
Tree
 
Control 
,
Tab Panel 
,
Toolbar 
s,
Flash charts
, andmaybe the most popular,
Grid 
control. Many of the controls can communicate directly to a server side using AJAX (
 A
synchronous 
  JavaScript and XML
).I will show you how to use
ExtJS
library in a simple example of a Phonebook application, step by step.Before we start, you need to make sure that you have the latest version of 
ExtJS 3
library. Currently, the latest version is
ExtJS 4
 but this tutorial is all about
ExtJS 3
version. So, in short, you must have
ExtJS 3
library. You can download it from the official web sitehttp://www.sencha.com/products/extjs3/download/. For a server side scripting I am going to use
PHP
. Of course you can use a different server side scripting language if you want.I will use
Netbeans
as my
IDE
(Integrated Development Environment). You can use any text editor you want, like
Notepad++;
Idecided to use
Netbeans
because it has a nice code formatting. On the server side I will use
WAMP
 
server
because I need support for
PHP
 and
MySQL
. As you can see, I am using
MySQL
database as a storage for our data. In this tutorial I will not talk about server side scriptingtoo much, because I assume that you have the basic knowledge of a
PHP
or some other server side scripting language.
 
Step 1
Create Database and Tables
I will use the simple database structureDatabase Name :
Phonebook 
 Table Name:
Contacts
 Here is the
Contacts
Table structure:
Column Name Column Type Additionally
ContactId
 
Int(10) PK, AutoIncPhone VarChar(30)FirstName VarChar(15)LastName VarChar(15)Address VarChar(100)
 
Step 2
Loading core ExtJS
In order to use
ExtJS
stuff you must load appropriate
JavaScript
and
CSS
files.
 
“/ext/resources/css/ext
-
all.css”
this is the
.css
file that contains (visual)styles for all
ExtJS
core components
 
"js/ext/adapter/ext/ext-base.js"
this is the
.js
file that contains base
ExtJS
stuff you need
 
 
js/ext/ext-all.js
 
this is the
.js
file that contains core
ExtJS
logic that you need
 
[code]<!-- include ext-all.css -->
 
<link rel=
"stylesheet"
 href=
"js/ext/resources/css/ext-all.css"
 />
 
<!-- include ext-base.js -->
 
<script type=
"text/javascript"
 src=
"js/ext/adapter/ext/ext-base.js"
></script>
 
<!-- include ext-all.js -->
 
<script type=
"text/javascript"
 src=
"js/ext/ext-all.js"
></script>
 
[/code]
So, do not forget to include these files into your
HTML
page where you want to use
ExtJS
library.
That’s all. You are now ready to use
ExtJS
. So simple.I will create a small
loader,
because these files may need some time to load (especially if your internet connection is slow) and I want toshow the loading progress to the user (client)
. You do not have to do this if you don’t want, it is just an example
of how you can trackloading core ExtJS files.After that I am loading my custom
.js
files
 
MainToolbar.js
 
Grid.js
 
ContactWindow.js
 
Application.jsAgain this is not the
ExtJS
logic, and you do not have to do stuff like this, this is just my way of working with
ExtJS
.
So, enough talking let’s look at code.
 

Activity (10)

You've already reviewed this. Edit your review.
1 hundred reads
1 thousand reads
Voislav Markovic liked this
Juan José liked this
Leslie Terada liked this
Aden Madar liked this
Bandi Genjutsu liked this
Bornemisa Sorin liked this
Lu Minh Nguyen liked this
arnisi liked this

You're Reading a Free Preview

Download
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->