load data into store from ajax request

[shruti_nair]

hi
i need to load data from an ajax request into a store
also need to show that data in a list
the store i'm using is:

LoginForm.receipts_store =new Ext.data.Store({
                                             model  : 'receipts_model',
                        
 });

var getReceiptsData=function(oauthToken1,oauthSecret,val)
{
    alert("inside get receipts data");

    var ts = OAuth.timestamp();
    var mdNumber=OAuth.nonce(11);
    
    var accessor1 = { consumerSecret: '',
        tokenSecret: oauthSecret};
    var message1 = { method: 'Get',
    action: '',
    oauth_version: "1.0", 
    oauth_consumer_key: "", 
    oauth_timestamp: ts, 
    oauth_nonce: mdNumber,
    oauth_signature_method: "HMAC-SHA1",
    oauth_token: oauthToken1,
    oauth_verifier: val,
    oauth_callback: 'Ext.util.JSONP.callback'
    };
    
    OAuth.SignatureMethod.sign(message1,accessor1);
    var signature2=OAuth.getParameter(message1.parameters, "oauth_signature");
    
    alert(signature2);
    Ext.Ajax.disableCaching = false;
    Ext.Ajax.request({    
                     url:'',
                     method: 'GET',
                     withCredentials: true,
                     useDefaultXhrHeader: false,
                     params: {
                     oauth_consumer_key:"",
                     oauth_token:oauthToken1,
                     oauth_timestamp:ts,
                     oauth_nonce: mdNumber,
                     oauth_signature_method:"HMAC-SHA1", 
                     oauth_signature:escape(signature2),
                     oauth_version:"1.0",
                     oauth_callback:"Ext.util.JSONP.callback"
                     },
                     callback: function(o, r, n){
                     
                     alert("in callback");
                     },     
                     success:function(response)
                     {
                        alert("inside success");
                        console.log("response="+response.responseText);
                     var Data=response.responseText;
                     LoginForm.receipts_store.load(Data);       

                     
                     LoginForm.views.Receipts.update();
                     },
                     failure:function(response)
                     {
                        alert("inside failure");
                     
                     }
    
                     });
    
}

the ajax request returns a json data
in the success function i load the data using
LoginForm.receipts_store.load(Data);
nw when i use the above code the list view shows a loading mask .If i loadData() method nothing happens .the list view appears blank..

[AkashSaikia]

Are you sure that the data you are getting is in Json format. It must be in json as you are using some JsonP structure and call back methods.


But the problem may be beacause either it is not getting data in Json format, or the amount of data is very large.
Try Ext encode function to make it as json.

I personally felt the second problem few days ago, when the sever returned 2000 records, and each time my browser crashed, i still dont know the reason.

To make this example work, why do not you try simply by adding a static json object in the load message same as you actually require and load the list.

[shruti_nair]

thanks when i add some sample data it works the view load that data
But what will be the possible solution to the problem .
how to handle such large json data???

[AkashSaikia]

I dont know much about the limit or amount of data that a list can show at a time.

If you are quering data base for large number of rows, then try using limit and paging.

But i think you are using some authentication api for application.

Did you try manipulating data of store directly?

new Ext.data.Store({
    model: 'User',    data : [        {firstName: 'Ed',    lastName: 'Spencer'},        {firstName: 'Tommy', lastName: 'Maintz'},        {firstName: 'Aaron', lastName: 'Conran'},        {firstName: 'Jamie', lastName: 'Avins'}    ] });

Make some limit code inside your application, may be if json returns 10000 records, do not directly load it in store. Infact make an ajax request and store the result json in some place.

And load only first 200 or some number of data into List by directly manipulating your store's data part.

When user reaches end of scroll, load another set of rows into the list.

I do not know is it feasible to you or not, but you can make a try or wait for some expert to reply .

[shruti_nair]

thanks

[AkashSaikia]

let us know if you find a better solution for the same.

Thanks.