What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

10Dec/112

ASP.NET AJAX & ExtJS 4 in 2-way JSON (2)

In this example we will use what we learned to build a "MSAjaxProxy" - just like a normal AjaxProxy, except geared towards IIS 6+ running MS AJAX Extensions 1.0. Proxies are used by all ExtJS stores (combos, grids, trees, etc.), so we would be able to do something like this:

{
	xtype: 'combo'
	, displayField: 'attrName'
	, valueField: 'attrID'
	, store:
	{
		fields: ['attrID','attrName']
		, proxy: Ext.create('MyOrg.proxy.MSAjaxProxy', {
			url: 'Default-UMRA.aspx/Test'
			, reader: { type: 'json' }
		}) // eo proxy
	} // eo store
}


For this store setup we would need a corresponding ASP.NET WebMethod, like so:

/// <summary>
/// Returns all combo attrs in format  [ {attrID: ...,attrName:'...'}, {...} ]
/// </summary>
[WebMethod(EnableSession = true)]
public static LinkedList<Dictionary<string,object>> Test()
{
	LinkedList<Dictionary<string,object>> ret = new LinkedList<Dictionary<string,object>>();
 
	// Add an attribute
	Dictionary<string,object> entry = new Dictionary<string,object>();
	entry.Add("attrID",123);
	entry.Add("attrName","Test Attr");
	ret.AddLast(entry);
 
	return ret;
}

So, the magic piece is the ExtJS extension to support MS AJAX weirdness. This time, it's in a context of a "Request" object (which is what Ext.Ajax.request() uses as well):

Ext.define('MyOrg.proxy.MSAjaxProxy', {
    extend: 'Ext.data.proxy.Ajax'
 
	, constructor: function(config) {
		var _t4e_proxy = this;
 
		var customConfig = {
			actionMethods: { read: 'POST', create: 'POST', update: 'POST', destroy: 'DELETE' }
			, timeout: 1000*60*10 // 5 minutes
		}; // eo customConfig
 
		Ext.apply(_t4e_proxy, Ext.apply(customConfig,config));
		this.callParent(arguments);
	} // eo constructor()
 
    , buildRequest: function (operation) {
        var params = Ext.applyIf(operation.params || {}, this.extraParams || {})
			, request;
        params = Ext.applyIf(params, this.getParams(params, operation));
        if (operation.id && !params.id) {
            params.id = operation.id;
        }
 
        request = Ext.create('Ext.data.Request', {
            jsonData: params // this enables the MS WebMethod call
            , action: operation.action
            , records: operation.records
            , operation: operation
            , url: operation.url
        });
        request.url = this.buildUrl(request);
        operation.request = request;
        return request;
    }
});
VN:F [1.9.22_1171]
Rating: 7.5/10 (8 votes cast)
ASP.NET AJAX & ExtJS 4 in 2-way JSON (2), 7.5 out of 10 based on 8 ratings
Comments (2) Trackbacks (3)
  1. Hi,
    how can i send parameters in POST to PageMethod ?

    My PageMethod has not parameter, but i will send pagination information to the method. I can be able prepare the data to send, and i see them in the Post tab of FireBug. But on the PageMethod i see the request.form always empty and i dont get the post data.

    Can you explain me how can achieve this ?

    Thank in advance,
    Giuseppe.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  2. i want to learn extjs but i still dont understand … ill keep reading your articles

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *