CODEWITHSUNDEEP
ajaxextjsgridhttpwebrequest
vbNewbie
vbNewbie

Reputation: 3345

retrieve data for grid/chart from httpwebrequest call to url

I am trying to get a grid filled with the json response I would receive when making a httpwebrequest call to a url endpoint which requires authentication. The data will be in json form:

{
"data": [
    {
        "value": "(\"Samsung Health\")",
        "tag": "ME"
    },
    {
        "value": "(\"Samsung Galaxy Tab\")",
        "tag": "HIM"
    },
    {
        "value": "(\"Amazon fire\")",
        "tag": "ME"
    }
]

}

I am not sure how to even start and whether to use Ext.Ajax.Request or some type of call from code behind. I am using vb.net in code behind. Any suggestions appreciated. Sample code for ajax call;

  function getMembers() {

    var parameters = {
        node: dynamicNodeId
    }

    Ext.Ajax.Request({
        url: 'https://data.json',
        method: 'GET',
        jsonData: Ext.encode(parameters),
        success: function (response, opts) {
            alert('I WORKED!');
            //decode json string
            var responseData = Ext.decode(response.responseText);

            //Load store from here
            memberStore.loadData(responseData);
        },
        failure: function (response, opts) {
            alert('I DID NOT WORK!');
        }

    });

}

The grid formation:

 var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    stateful: true,
    stateId: 'stateGrid',
    columns: [
        {
            text: 'Query',
            flex: 1,
            sortable: false,
            dataIndex: 'query'
        },
        {
            text: 'Last Updated',
            width: 85,
            sortable: true,
            renderer: Ext.util.Format.dateRenderer('m/d/Y'),
            dataIndex: 'lastChange'
        },

Here query would be the value from the json response and lastChange the current datetime. I tried the proxy request call and realized that since I am calling an endpoint on a different domain I needed to use jsonp.

var myStore = Ext.create('Ext.data.Store', {
     model: 'User',
     proxy: {
         type: 'jsonp',
         extraParams: {
            login: 'username',
            password: 'password'
         },
         url: 'https://api.data/rules.json',
         reader: {
             type: 'json',
             root: 'rules'
         },
         callbackParam: 'callback'
     },
     autoLoad: true
 });

I might have to just figure out some other way to do by making sure all the data I needed is called to a database by some other function.

Upvotes: 1

Views: 211

Answers (1)

existdissolve
existdissolve

Reputation: 3114

The best approach for your situation would be to create store that is configured with a remote proxy. See the example at the top of this documentation page: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store

The remote proxy will take care of the AJAX request to retrieve the data, and the store will automatically manage casting the data results to Ext.data.Model instances. Once the store is loaded with data, the grid to which the store is bound will also automatically handle rendering the data that has been populated into the store.

Upvotes: 1

Related Questions