ASP.Net Wrapper for ExtJS 4 WebServices

Eden Ridgway has created an ASP.NET Ajax Web Services proxy for ExtJS 3 and I like that because it allows developer to use ASP.NET Web Service references and dont need to write url directly in there.

Anyway, the code does not work anymore for ExtJS v. 4, because Sencha has changed their implementation a lot and there are some breaking changes. For example old is just an alias to a different class and above all, the class inheritance is changed a lot. More about this here:

So I have created another implementation, what takes advantage of ExtJS inheritance system and inherits Proxy class.

Another advantage is that you can handle your ASP net calls from one place and you get another level of abstraction there.

The code of AspWebServiceProxy looks like this:

/// <reference path="/Scripts/ext-all-debug.js" />

Ext.define('Ext.ux.AspWebServiceProxy', {
    extend: '',
    require: '',

    config: {
        webServiceProxyMethod: null,

    read: function (operation, callback, scope) {
        var userContext = {
            callback: callback,
            scope: scope

        var proxyWrapper = this;

        // Actual ASP.NET WS proxy call
            function (response, context, methodName) { // On Success
                proxyWrapper.loadResponse(response, userContext, methodName);
            function (response, context, methodName) { // On Error
                proxyWrapper.handleErrorResponse(response, userContext, methodName);
            }, null);


    handleErrorResponse: function (response, userContext, methodName) {
        alert("Error while calling method: " + methodName + "\n" + response.get_message());

    loadResponse: function (response, userContext, methodName) {
        var result = userContext.scope.reader.readRecords(response);

        // encapsulate returned ResultSet data with Operation class
        var operation = Ext.create('', {
            getResultSet: function() { return result; },
            getRecords: function() {return result.records; },
            wasSuccessful: function() {return result.success; }

        // result was replaced with operation, operation, userContext.arg, true);


And you can use this class like this from your ASP.NET Control/Page

<div id="example-grid"></div>



        Ext.define('Actors', {
            extend: '',
            fields: ['Name', 'Phone']

        var store = new
                        proxy: new Ext.ux.AspWebServiceProxy({
                            webServiceProxyMethod: ExtJSData.WebService1.GetJamesBondActors
                        reader: new{
                                type: 'json',
                                model: 'Actors',
                                root: 'd'

        // create the grid
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columns: [
                    { text: 'Name', width: 180, dataIndex: 'Name', sortable: true },
                    { text: 'Phone', width: 180, dataIndex: 'Phone', sortable: true }
            renderTo: 'example-grid',
            width: 540,
            height: 200


I haven’t handled the secure ASP.NET “d” Json root, but it shouln’t be a problem for you to do this in the loadResponse method.

Please also note the first line of the file, the magic comment

/// <reference path="/Scripts/ext-all-debug.js" />

will make JavaScript IntelliSense working inside your VisualStudio 2010 editor.

Sample project is for download here

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s