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 Ext.data.HttpProxy is just an alias to a different class and above all, the class inheritance is changed a lot. More about this here:

http://docs.sencha.com/ext-js/4-0/#/guide/class_system

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: 'Ext.data.proxy.Server',
    require: 'Ext.data',

    config: {
        webServiceProxyMethod: null,
    },

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

        var proxyWrapper = this;

        // Actual ASP.NET WS proxy call
        this.webServiceProxyMethod(
            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('Ext.data.Operation', {
            getResultSet: function() { return result; },
            getRecords: function() {return result.records; },
            wasSuccessful: function() {return result.success; }
        });

        // result was replaced with operation
        userContext.callback.call(userContext.scope, operation, userContext.arg, true);
    }

});

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

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


    Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.panel.*',
    'Ext.layout.container.Border'
]);

Ext.namespace('Example')

        Ext.define('Actors', {
            extend: 'Ext.data.Model',
            fields: ['Name', 'Phone']
        });

        var store = new Ext.data.Store(
                    {
                        proxy: new Ext.ux.AspWebServiceProxy({
                            webServiceProxyMethod: ExtJSData.WebService1.GetJamesBondActors
                        }),
                        reader: new Ext.data.reader.Json({
                                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
        });

        store.load();

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:

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s