extjs and ajax

www.Fullinterview.com

AN USER GUIDETO

Ext JS and AJAX

www.Fullinterview.com 1


Name Designation Account

AuthorsKalim Ahamed Chandsha Software Engineer

Sony Music

Reviewed by

Thribhuvan Krishnamurthy Project Lead Sony Music



TABLE OF CONTENTS

INTRODUCTION 4 WHAT IS EXT JS? 4WHAT IS AJAX? 4EXT JS BROWSER SUPPORT 5ADVANTAGES OF USING EXT JS: 5

GETTING STARTED 5 GETTING EXT: 5WHERE TO PUT EXT: 5HOW TO INCLUDE EXT: 6INITIAL EXAMPLE: 7

COMPONENTS OF EXT JS 11 THE CORE COMPONENTS: 11FORM: 11BUTTONS, MENUS, AND TOOLBARS 13DISPLAYING DATA WITH GRIDS 14

REUSE BY EXTENDING EXT JS 17 OOPS WITH EXT JS 17INHERITANCE 17PACKAGES, CLASSES AND NAMESPACES 17CREATING A CUSTOM NAMESPACE 18

CORE AJAX 18 CREATING A XMLHTTPREQUEST 18MAKING AJAX REQUEST FROM EXT JS 19

DOWNLOAD LINKS: 20

ACKNOWLEDGEMENT: 20

Authors Profile: 21



Introduction

What is EXT JS?

Ext JS is a powerful JavaScript library that simplifies Asynchronous JavaScript + XML (Ajax) development through the use of reusable objects and widgets. This article introduces Ext JS, providing an overview of the object-oriented JavaScript design concepts behind it, and shows how to use the Ext JS framework for rich Internet application UI elements.

What is AJAX?

The term AJAX (Asynchronous JavaScript and XML) is an overly-complicated acronym for saying that processes can take place in the background while the user is performing other tasks. A user could be filling out a form while a grid of data is loading—both can happen at the same time, with no waiting around for the page to reload.



Ext JS browser support

The Ext JS framework is supported in all the major Web browsers, including:

Windows Internet Explorer version 6 and later. Mozilla Firefox version 1.5 and later (PC and Macintosh). Apple Safari version 2 and later. Opera version 9 and later (PC and Mac).

Advantages of using EXT JS: It has a simple design model that is followed consistently throughout

the code Supports JavaScript core object-oriented concepts Supports design patterns (singleton design pattern, structural patterns,

flyweight design pattern, observer pattern. etc) Provides plug-in feature Easy to upgrade to new version

Getting Started

Getting Ext:You can download the ext SDK (Software Development Kit), from

http://www.extjs.com/products/extjs/download.php. This contains a ton of useful examples and the API reference. Most importantly, it contains the resources that Ext needs to run properly.

Where to put Ext:Once you get the SDK file, uncompress it onto your hard drive,

preferably in its own folder. My approach to folder naming conventions is based on the standard structure where all JavaScript go into a JS folder. Uncompress all of the files in the SDK into a folder named JS. After extracting everything from the SDK download file, your directory tree should look like this:


http://www.extjs.com/products/extjs/download.php


Included in the SDK file are a specification of dependencies, documentation, example code, and more. The adapter and resources folders shown in bold are required for Ext to work properly; everything else is just for development purposes.

adapter: Files that allow you to use other libraries alongside Ext build: Files that can be used to custom-build an ext-all.js Docs: The documentation center (this will only work when run on a

web server) examples: Plenty of amazing and insightful examples resources: Dependencies of the Ext library, such as CSS and images source: The complete source code for Ext

When you're ready to host your page on a web server, the adapter and resources folders will need to be uploaded to the server.

How to Include Ext:

Before you start writing the Ext components you need to include some of the Ext library in your JSP.



<html> <head> <title>Hello World</title> <link rel="stylesheet" type="text/css" href="JS/ext-2.1/resources/css/ext-all.css" /> <script src="JS/ext-2.1/adapter/ext/ext-base.js"></script> <script src="JS/ext-2.1/ext-all-debug.js"></script> </head> <body> </body></html>

The path to the EXT files must be correct and is relative to the location of our HTML file. These files must be included in the following order:

ext-all.css. The main Ext CSS file An external JS library file, if needed ext-base.js ext-all.js or ext-all-debug.js. The primary Ext library file A theme file could also be included here, or at any point after the main

Ext CSS file

I have included the following three files that Ext requires to run in our page: ext-all.css: A style sheet file that controls the look and feel of Ext

widgets. This file must always be included as-is, with no modifications. Any changes to the CSS in this file would break future upgrades. If the look and feel of Ext needs to be adjusted, another style sheet containing the overrides should be included after the ext-all.css file.

ext-base.js: This file provides the core functionality of Ext. It's the engine of the Ext car. This is the file that I would change if I wanted to use another library, such as jQuery, along with Ext.

ext-all-debug.js/ext-all.js: All of the widgets live in this file. The debug version is used for development, and then swapped out for the non-debug version for production.

Once these files are in place, I can start to actually use the Ext library and have some fun.

Initial Example:We can run some Ext code by adding a script section in the head of our

document, right after here the Ext library has been included. Our example will bring up an Ext style alert dialog:



<html><head>

<title>Hello World</title>

<link rel="stylesheet" type="text/css" href="JS/ext-2.1/resources/css/ext-all.css" />

<script src="JS/ext-2.1/adapter/ext/ext-base.js"></script>

<script src="JS/ext-2.1/ext-all-debug.js"></script>

<script>

Ext.onReady(function(){

Ext.Msg.alert('Hello', 'Hello World.....');

});

</script>

</head>

<body>

</body>

</html>



Let's take a closer look at the two core Ext functions we have just used:

Ext.onReady: This function provides a way to make our code wait until the DOM is available, before doing anything. This is needed because JavaScript starts executing as soon as it is encountered in the document, at which point, our DOM elements might not exist.

Ext.Msg.alert: This is the core function used for the creation of a dialog. It takes care of everything needed to have a working dialog. There are some shortcuts that can be used for common dialog types, which will help you save time.

The other dialog box’s available in Ext js are.

Ext.MessageBox Ext.Msg

Ext.Msg.progress

Ext.Msg.show

Ext.Msg.updateProgress

Msg.alert



Msg.prompt

Some other ways to display a message box is by displaying more than one button as given below.

<html><head>

<title>Hello World</title><link rel="stylesheet" type="text/css"

href="JS/ext-2.1/resources/css/ext-all.css" /><script src="JS/ext-2.1/adapter/ext/ext-base.js"></script><script src="JS/ext-2.1/ext-all-debug.js"></script>

<script>Ext.onReady(function(){

Ext.Msg.show({ title: 'Hello World', msg: 'Are you able to see the three button?',

buttons: { yes: true, no: true, cancel: true}

}); });

</script></head><body></body>

</html>

Have a look at the screen shot below. This has alert message with three buttons present.



Components of ext js

The core components: Form Buttons, Menus, and Toolbars Displaying Data with Grids

Form:

Forms are similar to the HTML forms that we use, without the usability restrictions and boring user interface. Here are some of the core form components that you should become familiar with:

Ext.form.FormPanel Ext.form.Field

Here is the first form with some input fields in it.



<html><head>

<title>Hello World</title><link rel="stylesheet" type="text/css"

href="JS/ext-2.1/resources/css/ext-all.css" /><script src="JS/ext-2.1/adapter/ext/ext-base.js"></script><script src="JS/ext-2.1/ext-all-debug.js"></script><script>Ext.onReady(function(){

var user_details = new Ext.FormPanel({renderTo: document.body,frame: true,title: 'User Details',width: 250,items: [{

xtype: 'textfield',fieldLabel: 'First Name',name: 'firstname'},{xtype: 'textfield',fieldLabel: 'Last Name',name: 'lastname'},{xtype: 'datefield',fieldLabel: 'Date of Birth',name: 'dob'} ]

});});</script>

</head><body></body>

</html>



A form can contain any of these following components given below just nee to change the xtype property.

textfield timefield numberfield datefield combo textarea HtmlEditor CheckboxGroups RadioGroup

Each component of form has its own property like allowedblank, vtype etc. For more details http://www.extjs.com/deploy/dev/docs/

Buttons, Menus, and ToolbarsExtjs comes with option such as buttons, menus and toolbars is also.The toolbar is an extremely flexible and useful component that will no doubt be used in every application.

Ext.Toolbar: The main container for the buttons Ext.Button: The primary handler for button creation and interaction Ext.menu: A menu

The toolbar consist of button, split button and menu. In the below example we have shown all the three type.


http://www.extjs.com/deploy/dev/docs/


Displaying Data with Grids This is one of main feature provided by the extjs, which is used by all

the application to display the bulk data. Extjs support both XML and JSON for displaying the data in grid.

First we will go with some example with a XML file. We will create a XML file with name USERDETAILS.xml. Here we will display the First Name, Last Name and Mobile Number.

First save this file with the name USERDETALS.xml. Note: To run this example you should have a web server so that the data gets rendered in the grid.<?xml version="1.0" encoding="UTF-8"?><dataset>

<row><id>1</id><firstname>Kalim</firstname><lastname>Chandsha</lastname><mobilenumber>9880227861</mobilenumber>

</row><row>

<id>2</id><firstname>Thribhuvan</firstname><lastname>Krishnamurthy</lastname><mobilenumber>9886178850</mobilenumber>

</row></dataset>



This will go into Html file.<script type="text/javascript">

Ext.onReady(function(){var store = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({url: 'USERDETAILS.xml'}),renderTo: document.body,reader: new Ext.data.XmlReader({

record:'row', id:'id'},['id', 'firstname', 'lastname', 'mobilenumber'])

});

var cm = new Ext.grid.ColumnModel([ {header: "First Name", width: 180, dataIndex: 'firstname'},

{header: "Last Name", width: 115, dataIndex: 'lastname'},{header: "Mobile Number", width: 100, dataIndex:

'mobilenumber'}]);

cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({ title: 'User Details',

height:200,width:450,frame:true,renderTo:'grid-example',store: store,

cm: cm });

store.load();});</script>



The similar way we can go with JSON data have a look below.{ success:true,

rows:[ {

"id":"1","firstname":"Kalim","lastname":"Chandsha","mobilenumber":"9880227861",

},{"id":"3","firstname":"Thribhuvan","lastname":"Krishnamurthy","mobilenumber":"9886178850",

} ]}

This JSON data can be brought from a server dynamically. We have different event handlers for the row and column actions.



Reuse by Extending Ext JS

Oops with Ext JSExt JS is a perfect example of this shift. The Ext JS library is an

extremely extensive collection of packages of classes of re-usable code: small pieces of functionality that can be taken on their own, or combined to create some truly fantastic client-side magic. An additional part of its beauty is the ability to extend the library further, creating our own custom components as extensions of those already there. This gives us the ability to create our own re-usable pieces of code. We can write our own objects, as extensions of the library. This means that we don't have to write all of our functionality on our own, as much of this work has already been done for us. We expand upon the foundation, providing our own custom functionality.

InheritanceTo gain a full understanding of what we need to do, we have to

understand one of the key concepts of object-oriented programming—inheritance. As we write our own components, these components will usually inherit some other component of Ext JS, extending that component's functionality by providing our own properties and overriding the component's existing methods. We are creating new classes from an existing Ext JS class to determine whether the method that has been called is that of our new class, the method of the extended (parent) class, or a combination of the two.

Packages, classes and namespacesThere are a few final pieces that of the object-oriented puzzle we need,

in order to keep a solid grasp of our goals. We've talked about how Ext JS is a large collection of objects extending other objects, but it's also important to understand a few other pieces of basic OO terminology, and how they help in keeping things organized.

PackagesA package is a collection of classes that share something in common.

For instance, the Ext.data package is a collection of classes for dealing with data, such as the different types of data Stores, Readers, and Records. The Ext.grid package is a collection of classes for the various grid objects, including all of the different grid types and selection models. Likewise, the Ext.form package contains classes for building forms, to include all of the classes of the different field types.

ClassesA class is what we call a specific JavaScript object, defining that

object's attributes and methods. Going back to our previous examples, Person and SalesPerson would both be written as class objects, and both would probably be part of the same package.Namespaces



Classes are a part of packages, and packages generally have their own namespace. Namespaces are containers of logically grouped packages and class objects. As an example, the Ext JS library falls into the Ext namespace. Forms within Ext JS fall into the Ext.forms namespace, where forms is a package of the various classes used to make up forms. It's a hierarchal relationship, using dot notation to separate the namespace from the package from the class. Variables from one namespace must be passed into another namespace, so applying a namespace helps to encapsulate information within itself. Ext.grid, Ext.form, and Ext.data are all custom namespaces.

Creating a custom namespace

We want to create our custom components within their own custom namespace for encapsulation, quick reference, and to help us organize our code. It may be that our packages or class may be named the same as other packages and classes already within Ext JS. A custom namespace prevents conflicts from occurring between classes of the same name, as long as each is defined within its own separate namespace. A common naming convention for user-defined objects is to use the Ext.ux namespace.

Ext.namespace('Ext.ux');

Core Ajax

Creating a xmlhttprequestHere I will create a core Ajax xmlhttprequest to make a request to the server. <script type="text/javascript">function ajaxFunction(){var xmlhttp;if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else if (window.ActiveXObject) { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }else { alert("Your browser does not support XMLHTTP!"); }xmlhttp.onreadystatechange=function()



{if(xmlhttp.readyState==4) { //get the xmlhttp.responseText; }}xmlhttp.open("GET","UserDetailsServlet",true);xmlhttp.send(null);}</script>

In the above code I am creating xmlhttp object for making a request to server. Once the object is created I will make a call by making use of send function and passing a null parameter. In xmlhttp.open we pass the method(GET/POST) name, Servlet/page name and third is one which specifies asynchronous(true) or synchronous(false) call.

Asynchronous call means it will not wait for the response of the server request the execution continues with other code.Synchronous call means it will for the response of the server request. These calls depend on the requirement of application.

Here we face some browser compatibility problem while we are creating a xmlhttprequest require to check whether the browser support XMLHttpRequest. If the browser is not supporting then we cannot use the Ajax server request.

Making Ajax request from Ext JSNow we see how to make Ajax request from Ext Js. Here we no need to

worry about creating xmlhttprequest object, internally Ext JS handles it. Just we need to call the following function.Ext.Ajax.request({

url: ‘UserDetailsServlet',params: {

userId: 171335,userName: ‘Kalim’,lastName: ‘Chandsha’,teamLead: ‘Thribhuvan’

},Success: function(response){ //Do the necessary things which require on success},Failure: function(response){ // Gets executed when any error is thrown from server}

});



Download Links:

Ext js http://www.extjs.com

Acknowledgement:

We acknowledge:

http:// www.extjs.com for ext js information.http:// www.w3schools.com for Ajax information

Last, but not the least, I acknowledge Mr.Thribhuvan Krishnamurthy for reviewing this document & providing valuable suggestions towards the betterment of this document.


http://www.w3schools.com/


Authors Profile:

Kalim Ahamed Chandsha

Name Kalim Ahamed chandsha E-mail [email protected]

ExpertiseHas experience of about 3 years in development projects in various technologies.

Experience Summary

Languages: Java, C, JavaScriptTechnologies: Servlets, JSP, JDBC, SQL, HTML, ExtJS, Stripes, JavaBeans.Databases: Oracle, SQL Server Application Servers: JBoss application server, Glassfish

Employee ID 171335


extjs and ajax

Documents