Click here to Skip to main content
15,867,686 members
Articles / Hosted Services / ExtJS

ExtJS with WebService

Rate me:
Please Sign up or sign in to vote.
4.88/5 (14 votes)
27 May 2013CPOL5 min read 66.1K   1.9K   24   25
In this article I have shared my way to work with ExtJS and Webservice

Introduction

This article is only for the beginners who have got stuck while working with ExtJS or thought about starting ExtJS.  In this article I will show a couple of useful ways to work with Ext. I hope it will help the beginners and encourage them more to work with ExtJS. Before starting we need to know what is ExtJS and why do we use ExtJS in our projects. 

About ExtJS 

ExtJS  is a pure JavaScript application framework  for building interactive web applications using techniques such as Ajax, DHTML and DOM scripting. Originally built as an add-on library extension of YUI by Jack Slocum, Ext JS includes interoperability with jQuery and Prototype. Beginning with version 1.1, ExtJS retains no dependencies on external libraries, instead making their use optional. 

Why ExtJS

  1. Rapid prototyping and interface building. Just define (basically) a big array, and you have a fully functional interface, completely blended in with the rest of the manager.  
  2. Packs a large amount of widgets that are infinitely configurable and customizable.  
  3. Through its object oriented philosophy, you can easily reuse other definitions in an object oriented fashion and save the hard work. Define a widget once, use it everywhere.  
  4. ExtJS makes stuff work and look fancy across browsers.   

Working with ExtJS is quite easy with static data but I found a little more difficulty to work with ExtJS grid with dynamic data as I don’t have any previous experience of working with it. So I thought it might help developers like me to work with ExtJS if I share my knowledge with everyone. 

Goal

The goal of this article is to share my way of working with ExtJS grid and WebService. I am going to bind ExtJS data grid with asp.net WebService and implement custom functions on ExtJS grid. 

I have attached a sample project for download. You can download the sample and take a look at the codes. It could help you better to understand the process. 

Explanation of the source code 

In my sample project I have used a user control so that I can use my extjs grid anywhere any time I need with the same functionality.  The scripts and styles required for ExtJS grid are on my user control. We need to add a css style sheet and a JavaScript file as reference to work with extjs grid. Additionally we need another reference
(
AspWebAjaxProxy.js) for using web service. 

Here are the references

C++
<link href="../ExtJsScripts/ext-all.css" rel="stylesheet" type="text/css" />
C++
<asp:ScriptManager ID="PageScriptManager" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/ExtJsScripts/ext-all-debug.js" />
        <asp:ScriptReference Path="~/ExtJsScripts/Ext.ux.AspWebAjaxProxy.js" />
    </Scripts>
</asp:ScriptManager> 

Now we need a WebService to provide data for the grid. This is how I have done this. 

*** You need to make sure to uncomment the following line of your web service to allow this WebService to be called from script, using ASP.NET AJAX. 

C++
[System.Web.Script.Services.ScriptService] 

*** If you need to work with session in you application then you need to add  

C++
[WebMethod(EnableSession = true)]
replacing [WebMethod] of your WebMethod. Otherwise you will get null value to session variable inside the WebMethod everytime.

From my WebMethod I am returning a list of objects and I am going to bind that object with my ExtJS data grid. You need to follow the underlying three steps to do it. 

Step 1: I have a public class in our WebService. Here is the structure of my class. 

C++
public class Record
{
  public string FirstName;
  public string LastName;
  public string EmailAddress;
  public int Salary;
}

Step 2: I need to define the fields in the Ext.define method. Here is the code. 

C++
Ext.define('Actors', {
            extend: 'Ext.data.Model',
            fields: ['FirstName', 'LastName', 'EmailAddress', 'Salary']
        });

Here  FirstName, LastName, EmailAddress and Salary are the fields of my class that I have  defined earlier.

Step 3: Now we need to create the Ext.data.Store from our web service. Here is how I am going to call the WebMethod of my WebService. 

C++
var store = new Ext.data.Store(
            {
                proxy: new Ext.ux.AspWebAjaxProxy({
                    url: '../App_Services/WebService1.asmx/LoadRecords',
                    actionMethods: {
                        read: 'POST'
                    },
                    reader: {
                        type: 'json',
                        model: 'Actors',
                        root: 'd'
                    },
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    }
                })
            }); 

Step 4: Now we need to create the grid panel to show to data as a grid format. The following code shows how we can accomplish that. 

C++
var grid = Ext.create('Ext.grid.Panel', {
           store: store,
           stateful: true,
           stateId: 'stateGrid',
           columns: [
           { text: 'FirstName', dataIndex: 'FirstName', renderer: FirstName_Rendered, width: 280, sortable: true },
           { text: 'LastName', dataIndex: 'LastName', sortable: true },
           { text: 'EmailAddress', dataIndex: 'EmailAddress', renderer: Email_Rendered, width: 150, sortable: true },
           { text: 'Salary', dataIndex: 'Salary', renderer: 'usMoney', sortable: true }
               ],
           ctCls: 'x-custgrid3-row',
           renderTo: 'ext-grid'
        });

Here we can see that we need to define the column names and dataIndex similar with the class fields to create the Ext.data.Store. The fields of the Ext.data.Store and the dataIndex for my columns are shown above.

We just now need to create a div, give it an id and render the grid. We just need to put the id of that div at the
"renderTo" property while creating the grid. The "renderTo" property is last line of the code above.

So we are done now. Our user Control is now ready. We can now put the user control in the page by dragging  the control and dropping it on the default page. If we now view the page on the browser then we will be able to view the grid with proper data. 

Now another requirement comes that we want to link our first name. We want to make our first name linkable to redirect to a new page. We can do this quite easily. We just need to call the function while creating the grid. In my above code you can see that i have a property called “renderer”. This property calls the javascript function it gets as a name. For example: 

C++
renderer: FirstName_Rendered 

calls the function FirstName_Rendered. Here is the details code of the FirstName_Rendered function. 

C++
var FirstName_Rendered = function (value, p, record, rowIndex) {
            var link;
            if (value == "Palash") {
                link = "<a href='http://www.google.com'>" + value + "</a>";
            } else {
                link = value;
            }
            return link;
        }; 

Similarly we can make the email field of the grid email friendly for browser. That email friendly means when an user clicks on the email field then a build in pop up of the browser will come out with the available emailing options. Here is the code to do this. 

C++
var Email_Rendered = function (value, p, record, rowIndex) {
            var link;
            link = "<a href='mailto:" + value + "'>" + value + "</a>";
            return link;
        }; 

Here is the output screenshot of our work so far.

Screenshot 1:  This is the expected output for ExtJS data grid.

Image 1

Screenshot 2: This mailto option will arise upon the click on the email address.

Image 2

 

This is all so far i have done with extjs grid. I will be very glad if my article helps you a little. Before closing I just want to say that I am totally agree with “Mark Hamstra” with his saying that ~ “I love ExtJS for what it does, but I hate the way it does it.”   

Thanks for reading and happy coding  Smile | :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Cefalo
Bangladesh Bangladesh
Hi,

I am Palash Debnath. I have been working on windows technologies since 2008. I started with ASP.NET. Then I moved to Windows Form and from the last year I have been working with Windows 8 app development. Work with Windows 10 apps development as well. Now I have been working with Microsoft Azure. I have completed my Undergraduate from Khulna University of Engineering in Computer Science & Engineering. Currently working as a Senior Software Engineer at Cefalo.

Comments and Discussions

 
QuestionRemote sorting is possible with this ? Pin
liomathew4-Apr-14 8:07
liomathew4-Apr-14 8:07 
Questiondata did not display for extjs 4.2 Pin
Member 1040328423-Nov-13 13:46
Member 1040328423-Nov-13 13:46 
QuestionWCF cross domain Pin
melnac5-Oct-13 8:54
melnac5-Oct-13 8:54 
GeneralMy vote of 5 Pin
Ștefan-Mihai MOGA13-Jun-13 20:56
professionalȘtefan-Mihai MOGA13-Jun-13 20:56 
GeneralRe: My vote of 5 Pin
dpalash13-Jun-13 21:26
professionaldpalash13-Jun-13 21:26 
GeneralMy vote of 5 Pin
Member 1051082213-Jun-13 8:13
professionalMember 1051082213-Jun-13 8:13 
GeneralRe: My vote of 5 Pin
dpalash13-Jun-13 8:22
professionaldpalash13-Jun-13 8:22 
GeneralMy vote of 5 Pin
Hasibul Haque10-Jun-13 0:49
professionalHasibul Haque10-Jun-13 0:49 
GeneralRe: My vote of 5 Pin
dpalash10-Jun-13 22:49
professionaldpalash10-Jun-13 22:49 
QuestionVery Good Post Pin
Jhonathan Izquierdo7-Jun-13 9:45
Jhonathan Izquierdo7-Jun-13 9:45 
AnswerRe: Very Good Post Pin
dpalash10-Jun-13 22:48
professionaldpalash10-Jun-13 22:48 
GeneralMy vote of 5 Pin
Sudhakar Shinde6-Jun-13 21:55
Sudhakar Shinde6-Jun-13 21:55 
GeneralRe: My vote of 5 Pin
dpalash6-Jun-13 23:31
professionaldpalash6-Jun-13 23:31 
GeneralGood post Pin
Shahriar Iqbal Chowdhury/Galib2-Jun-13 10:34
professionalShahriar Iqbal Chowdhury/Galib2-Jun-13 10:34 
GeneralRe: Good post Pin
dpalash2-Jun-13 19:59
professionaldpalash2-Jun-13 19:59 
GeneralMy vote of 5 Pin
Monjurul Habib28-May-13 22:03
professionalMonjurul Habib28-May-13 22:03 
GeneralRe: My vote of 5 Pin
dpalash29-May-13 2:40
professionaldpalash29-May-13 2:40 
GeneralMy vote of 5 Pin
Maksud Saifullah Pulak27-May-13 19:18
Maksud Saifullah Pulak27-May-13 19:18 
GeneralRe: My vote of 5 Pin
dpalash27-May-13 21:15
professionaldpalash27-May-13 21:15 
GeneralMy vote of 5 Pin
Member 1051082227-May-13 8:31
professionalMember 1051082227-May-13 8:31 
GeneralRe: My vote of 5 Pin
dpalash27-May-13 9:02
professionaldpalash27-May-13 9:02 
GeneralMy vote of 5 Pin
moududur shamim27-May-13 8:11
moududur shamim27-May-13 8:11 
Nice one.Thanks
GeneralRe: My vote of 5 Pin
dpalash27-May-13 9:01
professionaldpalash27-May-13 9:01 
GeneralMy vote of 5 Pin
Sk. Tajbir27-May-13 7:41
Sk. Tajbir27-May-13 7:41 
GeneralRe: My vote of 5 Pin
dpalash27-May-13 7:48
professionaldpalash27-May-13 7:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.