Scribd
Upload
171 views70 pages

Extjs English - Step by Step Phonebook Application

ExtJS is a cross-browser JavaScript library, that helps you creating web2. Applications, using different techniques like AJAX, DHTML and DOM scripting. It 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.

Uploaded by

Ken Ukeng
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
171 views70 pages

Extjs English - Step by Step Phonebook Application

ExtJS is a cross-browser JavaScript library, that helps you creating web2. Applications, using different techniques like AJAX, DHTML and DOM scripting. It 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.

Uploaded by

Ken Ukeng
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 70

-->

Explore / / / / + + <iframe height="0" src="//www.googletagmanager.com/ns.html?id=GTM-ZWF6" style="display:none;visibility:hidden" width="0"></iframe> ""> ""> : Download 0 23 Readcast scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd. scribd.

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.sen cha.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)FirstN ame VarChar(15)LastNa me VarChar(15)Addres s VarChar(100)

""> "">

Step 2

Loading core ExtJS


In order to use ExtJS stuff you must load appropriate JavaScript

and CSS files.


/ext/resources/css/e xt

all.css

this is the .css

file that contains (visual)styles for all ExtJS core components


"js/ext/adapter/ex t/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 extall.css --> <link rel= "stylesheet" href=

"js/ext/resources/ css/ext-all.css" />

<!-- include extbase.js --> <script type= "text/javascript" src= "js/ext/adapter/ex t/ext-base.js" ></script>

<!-- include extall.js --> <script type= "text/javascript" src= "js/ext/extall.js" ></script> [/code]

So, do not forget to include these files into your HTML page where you want to use ExtJS library.

Thats 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 dont 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 lets look at code.


""> "">

Index.html

[code]
<html> <head> <title> Phonebook - 1.0 Alpha

Programmed in ExtJS by Vladica Savic

</title> </head> <body> <div id= "loading-mask" style= "" > </div><div id= "loading" >

<center> <div> <img src= "images/ajaxloader.gif" width= "32" height= "32" style= "margin-right: 8px;float: left;

vertical-align: top;" /> Phonebook - 1.0 <a href= "http://www.vladic asavic.iz.rs" > www.vladicasavic. iz.rs </a><br />

<span id= "loading-msg" style=

"float: left;" > Loading images and styles... </span>

</div> </center> </div><!-include ExtJS CORE logic -->

<!-- include extall.css --> <link rel= "stylesheet" href= "js/ext/resources/ css/ext-all.css" /> <!-- my custom loader --> <script type= "text/javascript"

>document.getElem entById ( 'loading-msg' ). innerHTML = 'Loading API' ; </script> <!-- include extbase.js --> <script type=

"text/javascript" src= "js/ext/adapter/ex t/ext-base.js" ></script>

<!-- my custom loader --> <script type= "text/javascript" >document.getElem entById ( 'loading-msg'

). innerHTML = 'Loading ExtJS' ; </script>

<!-- include extall.js --> <script type= "text/javascript" src= "js/ext/extall.js"

></script> <!-- my custom loader --> <script type= "text/javascript" >document.getElem entById ( 'loading-msg' ). innerHTML =

'Loading Panel...' ; </script> <!-- my custom .js files --> <script type= "text/javascript" src= "js/toolbars/MainT oolbar.js" ></script>

<script type= "text/javascript" src= "js/grids/Grid.js" ></script> <script type= "text/javascript" src= "js/windows/Contac tWindow.js" ></script> <script type= "text/javascript"

src= "js/Application.js " ></script> <!-- my custom loader --> <script type= "text/javascript" >document.getElem entById ( 'loading-msg' ).

innerHTML = 'Launching Application...' ; </script> </body> </html>

[/code]

Main Layout
Lets first
create a basic application layout.Phonebook application will be a window that contains a toolbar menu with options that implements

CRUD (

Create Read Update Delete

)operations. It will also has central region where we will put a Grid

control for displaying our Contacts.First, I will create just a window frame. Later I will add a toolbar menu with described options and a Grid control.

All these stuff aredescribed in the Application.js file.

Application.js
[code] Ext . namespace (

'Phonebook' ); Ext . onReady (function() { try

{ document . execCommand ( 'BackgroundImage Cache' , false , true );

} catch ( ex ) { }

Ext . QuickTips . init (); Phonebook . Application = function()

{ var hideMask = function () {

Ext . get ( 'loading' ). remove (); createMainWindo w ();

} hideMask . defer ( 1000 ); function createMainWindo w ()

{ var mainWindow = new Ext . Window ({

title : 'Phonebook 1.0 Programmed in ExtJS by Vladica Savic' , width : 500 , height

: 400 , collapsible : true , minimizable : true , maximizable

: true , items : [ ] }); mainWindow

. show (); }; } (); });[/code]


""> ""> ""> ""> "">

""> ""> ""> ""> ""> ""> ""> ""> "">

: ... 0000 00 p.

Extjs English - Step by step phonebook application


ExtJS tutorial with step by step example of a Phonebook application. 5.7K Reads 8 Readcasts 14 Embed Views

Published by Vladica Savic

Ctrl-FF . ""> "">


: /

: : 11/28/2011 : Attribution Non-commercial : . Free download as PDF File (.pdf), Word Doc (.doc / .docx), Text File (.txt) or read online for free.

.PDF

.DOCX

.TXT

63 p.

ExtJS 4 First Look - book - sample chapter: Upgraded Charts Loiane Groner 7649 Reads

23 p. 74070949 Extjs English Step by Step Phonebook Application dygorgonites 455 Reads

49 p. Designing a User login panel with ExtJS for beginners Arun Prasad 2982 Reads

51 p. ExtJS Layouts Masums 10442 Reads Next

24 p. SrpskiExtJSTutorijal Vladica Savic 472 Reads

5 p. Delphi for PHP - Primena AJAX-A Vladica Savic 1411 Reads

9 p. Tutorijal php by Vladica Savic Vladica Savic 4943 Reads

Featured

370 p. Hello Wolves, I'm Home Random House Publishing Group $25.00

19 p. Paris: The Novel Doubleday

20 p.

Dessert as Art TheRecipeClub

19 p. Burial of American Landscape Beacon Press Next

Post comment

Scribd !

Premium Reader Scribd

AdChoices

/ API

Copyright 2013 Scribd Inc. : <div style="display:none;"> <img src="//pixel.quantserve.com/pixel/p-13DPpb-yg8ofc.gif" border="0" height="1" width="1" alt="Quantcast"> </div>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy