Question

How to load the data into a grid sending a cross domain request to a ws using AJAX? I am able to send the request but how I can load the data into the grid using a callback method?

Inside the contoller file:

if(searchText){
    var resultGrid = Ext.getCmp('myResultGrid');
    store.setProxy({
                            type: 'ajax',
                            // cross domain request
                            url:"http://3.xxx.xxx.77/cs/sid/"+searchText,
                            actionMethods:{read:'GET'},
                            pageParam: false, //to remove param "page"
                            startParam: false, //to remove param "start"
                            limitParam: false,
                            timeout:9000000,
                            noCache : true,
                            reader: {
                            type: 'json'
                            }
                    });


    resultGrid.store.load({
      scope: this,
      callback: function(records, operation, success) 
      {
          var totalcount= 0;
          totalcount = records.count(true);

          if(totalcount > 0)
          {
              // Load the data into grid ???

          }
          else
          {
              Ext.Msg.alert("No Records found.");   
          }
      }
    });
}

Store file: SearchResultsStore.js

     Ext.define('AM.store.SearchResultsStore', {
    extend: 'Ext.data.Store',
    model: 'AM.model.SearchModel',
    autoLoad: false
});

Model:

   Ext.define('AM.model.SearchModel', {
    extend: 'Ext.data.Model',
    fields: ['slno', 'customer']
});

json response

        [{"slno": "12454","customer": "acd"}]

Please help am stuck!!! Thanks in advance

Answer 1

You can’t use ajax to send requests accross domains, which is the actual problem here. You are assuming you have to do something in the load callback because you are not receiving data back in the first place, this has nothing to do with your problem and you do not need to use the callback. What you need to do is configure your store with a ‘jsonp’ proxy instead of ajax which will let you do cross domain calls:

store.setProxy({
                                type: 'jsonp',
                                // cross domain request
                                url:"http://3.xxx.xxx.77/cs/sid/"+searchText,
                                actionMethods:{read:'GET'},
                                pageParam: false, //to remove param "page"
                                startParam: false, //to remove param "start"
                                limitParam: false,
                                timeout:9000000,
                                noCache : true,
                                reader: {
                                type: 'json'
                                }
                        });