从httpwebrequest调用url检索网格/图表的数据

时间:2014-01-09 17:25:56

标签: ajax extjs grid httpwebrequest

我正在尝试使用json响应来填充网格,该响应是在对需要身份验证的url端点进行httpwebrequest调用时收到的。数据将采用json格式:

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

}

我不知道如何开始以及是否使用Ext.Ajax.Request或来自代码的某种类型的调用。我在代码后面使用vb.net。任何建议赞赏。 ajax调用的示例代码;

  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!');
        }

    });

}

网格形成:

 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'
        },

此处查询将是json响应的值,lastChange是当前日期时间。我尝试了代理请求调用并意识到,因为我在不同的域上调用端点,所以我需要使用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
 });

我可能必须通过确保我需要的所有数据通过其他函数调用到数据库来找出其他方法。

1 个答案:

答案 0 :(得分:1)

针对您的情况的最佳方法是创建使用远程代理配置的存储。请参阅本文档页面顶部的示例:http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store

远程代理将处理AJAX请求以检索数据,并且商店将自动管理将数据结果转换为Ext.data.Model实例。存储加载数据后,商店绑定的网格也将自动处理已填充到商店中的数据。