Extjs and Ajax
-
Upload
ehtasham-ul-haq -
Category
Documents
-
view
1.240 -
download
3
Transcript of Extjs and Ajax
www.Fullinterview.com
AN USER GUIDETO
Ext JS and AJAX
www.Fullinterview.com 1
www.Fullinterview.com
Name Designation Account
AuthorsKalim Ahamed Chandsha Software Engineer
Sony Music
Reviewed by
Thribhuvan Krishnamurthy Project Lead Sony Music
www.Fullinterview.com 2
www.Fullinterview.com
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
www.Fullinterview.com 3
www.Fullinterview.com
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.
www.Fullinterview.com 4
www.Fullinterview.com
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:
www.Fullinterview.com 5
www.Fullinterview.com
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.
www.Fullinterview.com 6
www.Fullinterview.com
<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:
www.Fullinterview.com 7
www.Fullinterview.com
<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>
www.Fullinterview.com 8
www.Fullinterview.com
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
www.Fullinterview.com 9
www.Fullinterview.com
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.
www.Fullinterview.com 10
www.Fullinterview.com
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.
www.Fullinterview.com 11
www.Fullinterview.com
<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>
www.Fullinterview.com 12
www.Fullinterview.com
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.
www.Fullinterview.com 13
www.Fullinterview.com
<script type="text/javascript">Ext.onReady(function(){new Ext.Toolbar({
renderTo: document.body,items: [{
xtype: 'tbbutton',text: 'Button'
},{xtype: 'tbbutton',
text: 'Menu Button',menu: [{
text: 'Better'},{text: 'Good'},{text: 'Best'}]
},{xtype: 'tbsplit',text: 'Split Button',menu: [{
text: 'Item One'},{text: 'Item Two'},{text: 'Item Three'
}]}]
});});</script>
www.Fullinterview.com 14
www.Fullinterview.com
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>
www.Fullinterview.com 15
www.Fullinterview.com
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>
www.Fullinterview.com 16
www.Fullinterview.com
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.
www.Fullinterview.com 17
www.Fullinterview.com
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
www.Fullinterview.com 18
www.Fullinterview.com
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()
www.Fullinterview.com 19
www.Fullinterview.com
{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}
});
www.Fullinterview.com 20
www.Fullinterview.com
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.
www.Fullinterview.com 21
www.Fullinterview.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
www.Fullinterview.com 22