Attempting to load Ext store with JSON data from AJAX request returns error

Question

Am attempting to load and Ext Store with Ext 4.0.7.

It is returning an Object doesn't support this property or method error when i call the loadRawData method on the store in the success callback of the AJAX request.

Here is the data i am loading:

{
    "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
    } 
    ]
}

This is the store code and ajax request:

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) {
    }
});

Can't quite see why this is returning an error?

is there any good reason for not using an ajax proxy? why are you loading the store in that way? I mean, pagingmemory is there for paging data we have in memeory but... you are fetching data from the sever. — lontivero
A fair point. But how do i load data into a pagingmemory store on page load from the server? Would i need to load the data from the above store to a subsequent pagingmemory store. The requirement is to pull historical data from the server and then accept new data via polling which will then be added to the pagingmemory store. — RyanP13

lontivero lontivero · Accepted Answer · 2012-12-17T13:02:38

As in my comment, you don´t need a pagingmemory store. What you need is an ajax store because the pagingstore is for allowing pagination with data you have in memory but there is no reason to use it seeing your requirement.

So if you use an standard ajax proxy, you will be able to load it in the normal way (using the .load() method). Then, when you need to add more record from the server you what you have to do is just call the load method again but with the addRecords option.

For example (untested sample):

// 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
});

Attempting to load Ext store with JSON data from AJAX request returns error

2 Answers