Working with Sencha EXTJS and WCF Service (Fetch Data)

JavaScript frameworks are the next future in application development. They provide a very effective, fast and modern way to develop and maintain the web application which gives it a desktop application look and feel.

Sencha EXTJS is one of the many available such frameworks.

I'm into MS technologies mainly ASP.NET.
Following is a basic example of how to connect to WCF services using EXTJS into ASP.NET application.

On WCF service project -

Create a WCF service which returns a list of users to the consumer (If you are looking for the EXTJS with WCF solution then I think I dont need to tel how to create a WCF service :))

The most important thing to do at WCF side -

Add following code in the global.asax of WCF solution -

  protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, x-requested-with");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }

This code is required to handle request with uri having additional params.

The Store   
Ext.define('My.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    autoLoad: true,
    proxy: {
        type: 'ajax',       
            url: 'http://localhost/EXTJSService/RestService.svc/getUsers',
        reader: {
            type: 'json',
            root: 'GetUsers'
        }
    }
});

Here url is the path of your WCF service, in this example its hosted on the same machine, localhost.

root is the root element if the resultant JSON data (in most of the examples you will find it "d:")

View -
Ext.define('My.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: 'All Users',
    store: 'Users',
    initComponent: function () {
        this.columns = [
            { header: 'ID', dataIndex: 'ID', flex: 1 },
            { header: 'Name', dataIndex: 'FirstName', flex: 1 },
            { header: 'Email', dataIndex: 'Email', flex: 1 }
        ];
        this.callParent(arguments);
    }
});

Important things to note is the mapping of fields in the grid, these should map to the field names in the JSON data.

Hope you find it useful.
Enjoy....

WCF Interview Question

What are the various ways of hosting a WCF service?

How do we host a WCF service in IIS?

What are the advantages of hosting WCF Services in IIS as compared to self-hosting?

What are the major differences between services and Web services?

What is the difference WCF and Web services?

What is one-way operation?

Can you explain duplex contracts in WCF?

How can we host a service on two different protocols on a single server?

Can you explain transactions in WCF?

What different transaction isolation levels provided in WCF?

What is a poison message?

What is service and client in perspective of data communication?

What is address in WCF and how many types of transport schemas are there in WCF?

What are the important principles of SOA (Service oriented Architecture)?

What are ends, contract, address, and bindings?

Which specifications does WCF follow?

What are the main components of WCF?

Explain how Ends, Contract, Address, and Bindings are done in WCF?

What is a service class?

What is a service contract, operation contract and Data Contract?

How to define a service as REST based service in WCF?

What is the address formats of the WCF transport schemas?

What is Proxy and how to generate proxy for WCF Services?

What are different elements of WCF services Client configuration file?

What is Transport and Message Reliability?

How to configure Reliability while communicating with WCF Services?

 

What are meta MAX attributes in WCF?

 

How to return an exception from WCF to the client?

 

What is the use of Message Inspector in WCF?