Search code examples
jsonextjsjsonstore

Load JSON file into JSON-Store is not working


below you can see my Login functionality, which actually is working. But it does not load the provided json file by the server into JSON Store.

"console.log("Store before load",UserStore)" and "console.log("Store after load",UserStore)" shows exactly the same message, so i guess "UserStore.load(jsonRes)" is not working at all. I also tried "UserStore.loadData(jsonRes)" and "UserStore.loadRawData(jsonRes)" which both work neither (Error: Uncaught TypeError: Object[object Object] has no method 'loadDataRaw'). Could you please explain me how to fix that issue? Thanks a lot.

Ext.util.JSONP.request({

url: 'http://127.0.0.1:4712/talentcommunity/getuserinfo',

headers: { 
    'content-type': 'application/x-www-form-urlencoded ; charset=utf-8'
},

method: 'post',

params: {
    user:data1,
    pw:data2
},

callbackName: 'myCallback',

success: function (response) {

    var loginResponse = response;
    if (loginResponse.msg == "OK") {
        var UserStore = Ext.create('Ext.data.Store', {
            model: 'Sabine.model.user',
            data: response.user
        });
        me.signInSuccess();
    }
    else{
        loginView.showSignInFailedMessage('token null.');   
    } 

},

The Json file provided look like this:

{msg: "OK", user: Object}

'user' itself looks like this: {"token":"ee80d56688fb7d3a8bcf5939fc9cbcf1","title":"","login":"bmuster","facebookId":"","firstName":"Bertha","lastName":"Muster","nationality":"GM","birthDay":"12/09/82","phone":"+4989111111","mobile":"+4918111111","street":"Musterstra\ufffde 11","city":"Musterstadt","zipCode":"66666","willingToTravel":"","pictureUrl":"","eMail":"[email protected]","publicList":[]}

My Store is defined as follows:

Ext.define('Sabine.store.MyJsonPStore', {
extend: 'Ext.data.Store',

requires: [
    'Sabine.model.user'
],

config: {
    autoLoad: true,
    autoSync: true,
    clearOnPageLoad: false,
    model: 'Sabine.model.user',
    storeId: 'myStore'
}
});

The corresponding model:

Ext.define('Sabine.model.user', {
extend: 'Ext.data.Model',

config: {
    fields: [
        {
            name: 'token',
            type: 'string'
        },
        {
            name: 'title'
        },
        {
            name: 'login'
        },
        {
            name: 'facebookId'
        },
        {
            name: 'firstName',
            type: 'string'
        },
        {
            name: 'lastName',
            type: 'string'
        },
        {
            name: 'nationality',
            type: 'string'
        },
        {
            name: 'birthDay',
            type: 'string'
        },
        {
            name: 'phone'
        },
        {
            name: 'mobile'
        },
        {
            name: 'street'
        },
        {
            name: 'city',
            type: 'string'
        },
        {
            name: 'zipCode',
            type: 'int'
        },
        {
            name: 'willingToTravel'
        },
        {
            name: 'pictureUrl'
        },
        {
            name: 'eMail'
        },
        {
            name: 'publicList'
        }
    ]
}
});

Example of a View:

Ext.define('Sabine.view.MeinAccount', {
    extend: 'Ext.Container',
    alias: 'widget.accview',
    config: {
        maxHeight: 480,
        maxWidth: 320,
    items: [{
        xtype: 'tabpanel',
        height: 430,
        maxHeight: 480,
        items: [
            {
            xtype: 'list',
            title: 'Allgemein',
            iconCls: 'home',
            modal: false,
            deferEmptyText: false,
            itemTpl: [
                '<table border = "0">',
                '<tr>',
                ' <td>Firstname</td>',
                ' <td>{firstName}</td>',
                ' <td>Last<name/td>',
                ' <td>{lastName}</td>',
                '</tr>',
                '<tr>',
                ' <td>Nationality</td>',
                ' <td>{nationality}</td>',
                '</tr>',
                '</table>'
            ],
            store: 'Sabine.store.UserStore'
     },

Solution

  • Couple of thoughts about your problem:

    • you have a field publicList that is not declared in your model
    • store.load does not accept an instance of a model, on the contrary - it loads your local store with the data from the server
    • store.loadData or store.loadRawData is your way to go, however the message you mention (Uncaught TypeError: Object[object Object] has no method..) indicates that you haven't successfully retrieved an instance of store. In order to do so you should firstly instantiate the store, not just declare it; use Ext.create method for that
    • if your loginResponse.user is already in JSON format, you shouldn't use Ext.JSON.encode