1. #1
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,407
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default SimpleJsonLoader

    SimpleJsonLoader


    I've found this to be useful, particularly when you need to load several pieces of data for several different components on the page...

    Code:
    /*
     */
    
    /**
     * @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);
            }
        }
    });

  2. #2
    Ext User
    Join Date
    Aug 2007
    Posts
    32
    Vote Rating
    0
    onawave is on a distinguished road

      0  

    Default Could you give examples of how this would be used?

    Could you give examples of how this would be used?


    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

  3. #3
    Sencha User
    Join Date
    May 2007
    Posts
    100
    Vote Rating
    0
    vivid-planet is on a distinguished road

      0  

    Default


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

    niko

  4. #4
    Ext User
    Join Date
    Jun 2008
    Posts
    19
    Vote Rating
    0
    litumishra is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2007
    Location
    London, UK
    Posts
    50
    Vote Rating
    0
    Lucian is on a distinguished road

      0  

    Default just my 2 cents...

    just my 2 cents...


    @Stever: In order for a callback function to work, you must add a.node as argument for this.processResponse inside the handleResponse function:

    PHP Code:
    this.processResponse(responsea.nodea.callback); 
    Also, the argument for Ajax object should be

    PHP Code:
    argument: {callback: function() {alert('Kill Bill!')}}, // without node 
    @litumishra : It's quite easy to use it, as in this example:

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

    console.dir(jloader.load()); 
    No signature.