PDA

View Full Version : SimpleJsonLoader



stever
3 Oct 2007, 6:23 AM
I've found this to be useful, particularly when you need to load several pieces of data for several different components on the page...


/*
*/

/**
* @class Ext.data.SimpleJsonLoader
* @extends Ext.util.Observable
* @constructor
* Creates a new SimpleJsonLoader.
* @param {Object} config A config object containing config properties.
*/
Ext.data.SimpleJsonLoader = function(config){
this.baseParams = {};
this.requestMethod = "POST";
Ext.apply(this, config);

this.addEvents({
/**
* @event load
* Fires when the json has been successfuly loaded.
* @param {Object} This object.
* @param {Object} response The response object containing the data from the server.
*/
"load" : true,
/**
* @event loadexception
* Fires if the network request failed.
* @param {Object} This object.
* @param {Object} response The response object containing the data from the server.
*/
"loadexception" : true
});

Ext.data.SimpleJsonLoader.superclass.constructor.call(this);
};

Ext.extend(Ext.data.SimpleJsonLoader, Ext.util.Observable, {
/**
* @cfg {String} dataUrl The URL from which to request a Json string to be loaded.
*/
/**
* @cfg {String} url Equivalent to {@link #dataUrl}.
*/
/**
* @cfg {Object} baseParams (optional) An object containing properties which
* specify HTTP parameters to be passed to each request.
*/
/**
* Load json from the URL specified in the constructor.
* @param {Function} callback
*/
load : function(callback){
if(this.dataUrl||this.url){
this.requestData(callback);
}
},

requestData : function(callback){
this.transId = Ext.Ajax.request({
method:this.requestMethod,
url: this.dataUrl||this.url,
success: this.handleResponse,
failure: this.handleFailure,
scope: this,
argument: {callback: callback, node: node},
params: this.baseParams
});
},

isLoading : function(){
return this.transId ? true : false;
},

abort : function(){
if(this.isLoading()){
Ext.Ajax.abort(this.transId);
}
},

processResponse : function(response, node, callback){
var json = response.responseText;
try {
this.result = eval("("+json+")");
if(typeof callback == "function"){
callback(this, this.result);
}
}catch(e){
this.handleFailure(response);
}
},

handleResponse : function(response){
this.transId = false;
var a = response.argument;
this.processResponse(response, a.callback);
this.fireEvent("load", this, response);
},

handleFailure : function(response){
this.transId = false;
var a = response.argument;
this.fireEvent("loadexception", this, response);
if(typeof a.callback == "function"){
a.callback(this);
}
}
});

onawave
13 Oct 2007, 6:07 AM
Hello,

I wondered if you could give an example of how this would be used? I'm still not quite fully on the same page with how these code snippets can be implemented - so any help would be great.

Thanks

vivid-planet
13 Oct 2007, 7:29 AM
What is the difference between this class and Ext.Ajax.request?

niko

litumishra
9 Sep 2008, 5:03 AM
Can you provide sample code, how we can use this?

Lucian
15 Sep 2008, 2:24 AM
@Stever: In order for a callback function to work, you must add a.node as argument for this.processResponse inside the handleResponse function:



this.processResponse(response, a.node, a.callback);


Also, the argument for Ajax object should be



argument: {callback: function() {alert('Kill Bill!')}}, // without node


@litumishra : It's quite easy to use it, as in this example:



var jloader= new Ext.data.SimpleJsonLoader({
url: 'http://yourdomain/file.json'
});

console.dir(jloader.load());