Wednesday, December 22, 2010

Ext.ux.JSONP v2.0

The ExtJS library does include a JSONP component, but I found it to be lacking a very important piece of functionality.

The Problem: No Error Handler

Anyone who know's anything about JSONP is immediately going to call attention to the fact that JSONP isn't capable of supporting error handling by design. While that is true, it doesn't mean that we don't have to handle errors. One of the more well known jQuery plugins for JSONP includes a callback method for "complete" which enables you to know when a request failed.

One additional nitpick that I had with the ExtJS JSONP component what that I did not feel it was coded in a very Object Orient fashion, but that's probably just a personal gripe.

The Solution: v2.0

I rewrote the Ext.ux.JSONP component to include additional parameters that match up with a normal Ext.Ajax.request. This means that you can access handlers for success, failure, and callback.

Also, I made the code much more OO.

Download

Ext.ux.JSONP v2.0

Examples

// Old
Ext.ux.JSONP.request('http://api.flickr.com/services/feeds/photos_public.gne', {
   callbackKey: 'jsoncallback',
   params: {
       format: 'json',
       tags: Ext.fly('search-value').dom.value,
       tagmode: 'all',
       lang: 'en-us'                            
   },
   callback: updateResults
});

// New
Ext.ux.JSONP.request({
   url : 'http://api.flickr.com/services/feeds/photos_public.gne',
   params: {
       format: 'json',
       tags: Ext.fly('search-value').dom.value,
       tagmode: 'all',
       lang: 'en-us'                            
   },
   success : this.updateSuccess,
   failure : this.updateFailure,
   callback : this.updateCallback,
   scope : this
});

Real Time Web Analytics