SimpleJsonLoader

[stever]

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]

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]

What is the difference between this class and Ext.Ajax.request?

niko

[litumishra]

Can you provide sample code, how we can use this?

[Lucian]

@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());