尝试使用来自 AJAX 请求的 JSON 数据加载 Ext 存储返回错误答案

【问题标题】：Attempting to load Ext store with JSON data from AJAX request returns error尝试使用来自 AJAX 请求的 JSON 数据加载 Ext 存储返回错误
【发布时间】：2012-12-04 04:14:54
【问题描述】：

我正在尝试使用 Ext 4.0.7 加载和 Ext Store。

当我在 AJAX 请求的成功回调中调用 store 上的 loadRawData 方法时，它返回一个 对象不支持此属性或方法错误。

这是我正在加载的数据：

{
    "data": [
    {
        "id": 1,
        "source": "1445261",
        "target": "1437043",
        "sourceType": "user",
        "redirectUrl": "http://www.google.co.uk",
        "message": "this is a notification message",
        "targetType": "user",
        "messageType": "notification",
        "sentDate": "1354758001",
        "notificationType": "notification",
        "parameters": "null",
        "read": "false",
        "readDate": 1354758001
    }, 
    {
        "id": 2,
        "source": "1445261",
        "target": "1437043",
        "sourceType": "user",
        "redirectUrl": "http://www.google.co.uk",
        "message": "this is a notification message",
        "targetType": "user",
        "messageType": "notification",
        "sentDate": "1354758001",
        "notificationType": "notification",
        "parameters": "null",
        "read": "false",
        "readDate": 1354758001
    },  
    {
        "id": 3,
        "source": "1445261",
        "target": "1437043",
        "sourceType": "user",
        "redirectUrl": "http://www.google.co.uk",
        "message": "this is a notification message",
        "targetType": "user",
        "messageType": "notification",
        "sentDate": "1354758001",
        "notificationType": "notification",
        "parameters": "null",
        "read": "false",
        "readDate": 1354758001
    } 
    ]
}

这是商店代码和ajax请求：

var infoStagingStore = Ext.create('Ext.data.Store', {
    model: 'SCB.RMWB.InfoBar.Model.Message',
    storeId: 'Staging',
    autoLoad: false,
    pageSize: 10,
    proxy: {
        type: 'pagingmemory',
        reader: {
            type: 'json',
            root: 'data'
        }
    },
    listeners: {
        load: function(){
            console.log('loaded');
        }
    }   
});

Ext.Ajax.request({
    url: '/rmwb/resources/js/app/infoBar/data/data.json',
    timeout: 60000,
    method: 'GET',
    scope: this,
    params: '',
    success: function(resp) {
        console.log(resp.responseText);
        var store = Ext.data.StoreManager.lookup('Staging');
        store.loadRawData(resp.responseText, true);
    },
    failure: function(resp, opts) {

    },
    callback: function(options, success, resp) {
    }
});

不太明白为什么会返回错误？

【问题讨论】：

不使用 ajax 代理有什么好的理由吗？你为什么以这种方式加载商店？我的意思是，pagingmemory 用于我们在内存中的分页数据，但是......您正在从服务器获取数据。
公平点。但是如何在从服务器加载页面时将数据加载到分页内存存储中？我是否需要将数据从上述存储加载到后续的分页内存存储。要求是从服务器中提取历史数据，然后通过轮询接受新数据，然后将其添加到分页内存存储中。

标签： ajax extjs view store

【解决方案1】：

在我的评论中，您不需要分页内存存储。您需要的是一个 ajax 存储，因为 pagingstore 用于允许对内存中的数据进行分页，但没有理由根据您的要求使用它。

因此，如果您使用标准的 ajax 代理，您将能够以正常方式加载它（使用 .load() 方法）。然后，当您需要从服务器添加更多记录时，您只需再次调用 load 方法，但使用 addRecords 选项。

例如（未经测试的样本）：

// load store with historical data
infoStagingStore.load(); 

// load more records to the store from a different resource
infoStagingStore.load({
    url: '/rmwb/resources/js/app/infoBar/data/data.json',
    addRecords: true
});

【讨论】：

【解决方案2】：

既然您已将您的商店分配给一个名为 infoStagingStore 的变量，您能否在您的 ajax 调用中直接引用该目录？

Ext.Ajax.request({
    url: '/rmwb/resources/js/app/infoBar/data/data.json',
    timeout: 60000,
    method: 'GET',
    scope: this,
    params: '',
    success: function(resp) {
        console.log(resp.responseText);
        //var store = Ext.data.StoreManager.lookup('Staging');
        infoStagingStore.loadRawData(resp.responseText, true);
    },
    ...

【讨论】：