Search code examples
extjsmodelstore

extjs store.load not populating, possibly root object issue?

I am having trouble loading my first ExtJS store. 

        var testStore = Ext.data.StoreManager.lookup('myUserStoreID');
        testStore.load({

        callback: function (records, operation, success) {

            testStore.each(function (record) {
                debugger;
                var task = record.data.description;
                console.log(task);
            });

            //debugger;
            //var x2 = operation._response;
            //var x3 = x2.responseText;
            //var x4 = Ext.decode(x3);
            ////var x3 = Ext.JSON.decode(operation);
            ////var x2 = Ext.decode(operation.response);

            //console.log(testStore);

        }
    });

In debugger I can see the correct data if I drilldown into operation._response.responseText, but the records are blank. So I know it just has to do with my code. If I use the Ext.decode it does return an object. What am I doing wrong that the return data automatically populates my store.

Here is a picture of the object in fiddler. fiddler

here is the Model I am trying to use... I know it doesn't have all the fields yet.

Ext.define('ExtApplication1.model.UserModel', {
extend: 'ExtApplication1.model.Base',

requires: ['ExtApplication1.model.Base'],

fields: [
    /*
    The fields for this model. This is an Array of Ext.data.field.Field definition objects or simply the field name.
    If just a name is given, the field type defaults to auto.  For example:
    */
    { name: 'UserID',     type: 'int' },
    { name: 'UserName',      type: 'string' },
    { name: 'password',    type: 'string' },
    { name: 'Email',   type: 'string' },
    { name: 'GroupID' }

],

proxy: {

    type: 'ajax',
    url: 'http://localhost:49537/api/user/gettargetuser/xxx/xxx',

    reader: {
        type: 'json',
        rootProperty: 'JSON'
    }

}

Here is my User class in webapi userclasswebapi

here is the MainModel.js where I create stores

Ext.define('ExtApplication1.view.main.MainModel', {
extend: 'Ext.app.ViewModel',

alias: 'viewmodel.main',

data: {
    name: 'ExtApplication1',
    appName: xxx,
    appHeaderIcon: '<span class="fa fa-desktop fa-lg app-header-logo">',
    footer: 'Copyright - xxx- x
},

stores: {
        sessionListByInterest: {
            model: 'MainMenuListModel',
            autoLoad: false     //was true
        },
        myUserStore: {
            model: 'UserModel',
            storeId: 'myUserStoreID',
            autoLoad: false
        },
Solution

  • The issue is that the store expects rootProperty to contain an array of records, while you are only delivering a single record.

    If you want to only load a single record, which is not in an array, you would have to use the static model.load() function.

    Or you can change your API endpoint from User JSON to List<User> JSON (or IEnumerable<User> or ICollection<User> or User[]...), even if you intend to only return a single user. Doesn't matter how many records there are in the JSON array, but the array is expected by ExtJS store.