Extjs English - Step by step phonebook application

of 23
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
ExtJS tutorial with step by step example of a Phonebook application.
Document Share
Document Tags
Document Transcript
   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.    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/ajax-loader.gif  width= 32  height= 32  style= margin-right: 8px;float: left; vertical-align: top; /> Phonebook - 1.0 - <a href= http://www.vladicasavic.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 ext-all.css -->   <link rel= stylesheet  href= js/ext/resources/css/ext-all.css  />   <!-- my custom loader -->   <script type= text/javascript >document.getElementById ( 'loading-msg' ). innerHTML =  'Loading API' ; </script>   <!-- include ext-base.js -->   <script type= text/javascript  src= js/ext/adapter/ext/ext-base.js ></script>   <!-- my custom loader -->   <script type= text/javascript >document.getElementById ( 'loading-msg' ). innerHTML =  'Loading ExtJS' ; </script>   <!-- include ext-all.js -->   <script type= text/javascript  src= js/ext/ext-all.js ></script>   <!-- my custom loader -->   <script type= text/javascript >document.getElementById ( 'loading-msg' ). innerHTML =  'Loading Panel...' ; </script>   <!-- my custom .js files -->   <script type= text/javascript  src= js/toolbars/MainToolbar.js ></script>   <script type= text/javascript  src= js/grids/Grid.js ></script>   <script type= text/javascript  src= js/windows/ContactWindow.js ></script>   <script type= text/javascript  src= js/Application.js ></script>   <!-- my custom loader -->   <script type= text/javascript >document.getElementById ( 'loading-msg' ). innerHTML =  'Launching Application...' ; </script>   </body>   </html>   [/code]  
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks

We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

More details...

Sign Now!

We are very appreciated for your Prompt Action!