Load Data into JSON-Store

Question

I'm pretty much a greenhorn in developing sencha, so I really hope you can help me with this.

Below you can see my LogIn functionality 'onSignInCommand', which actually is working. By sending the login-request to the server, I get back the following JSONP-File. I like to load the user information (name, age,...) provided by the JSON File into a JSON Store. How can I handle this?

{"msg": "OK",
 "user": {
          "token": "xyz",
          "firstName": "Bertha",
          "lastName": "Muster",
          "age": "24",
         }
}

==========

onSigninCommand: function(view, username, password) {
    var data1 = username;
    var data2 = password;
    var me = this;
    loginView = me.getLoginView();
    if (username.length === 0 || password.length === 0) {
        loginView.showSignInFailedMessage('keine eingabe');
        return;
    }
    console.log('Username: ' + username + '\n' + 'Password: ' + password);
    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
        },
        callbackKey: 'callback',
        success: function(response) {
            console.log(response);
            var loginResponse = response;
            if (loginResponse.msg == "OK") {
                me.signInSuccess();
            } else {
                loginView.showSignInFailedMessage('token null.');
            }
        },
        failure: function(response) {
            loginView.showSignInFailedMessage('token null.');
        }
    });

---

I edited success function within 'onSignInCommand' as you said. But it doesn't execute XXX.store.MyJsonPStore.loadData(jsonResponse).

The Store itself is defined in a separate file, see below.

Could you help me one more time?

onSigninCommand: function(view, username, password) {
var data1 = username;
var data2 = password;
var me = this;
loginView = me.getLoginView();
if (username.length === 0 || password.length === 0) {
    loginView.showSignInFailedMessage('keine eingabe');
    return;
}
console.log('Username: ' + username + '\n' + 'Password: ' + password);
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
    },
    callbackKey: 'callback',

    success: function (response) {

      console.log(response);

      var loginResponse = response;

      if (loginResponse.msg == "OK") {

           var jsonResponse = Ext.JSON.decode(response.responseText);
           XXXne.store.MyJsonPStore.loadData(jsonResponse);
           me.signInSuccess();
      }

      else {
           loginView.showSignInFailedMessage('token null.');
      }
    },

    failure: function(response) {
        loginView.showSignInFailedMessage('token null.');
    }
});

=============

Ext.define('xxx.store.MyJsonPStore', {
  extend: 'Ext.data.Store',
  alias: 'store.myStore',

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

  config: {
     model: 'xxx.model.user',
     storeId: 'myStore',
     proxy: {
        type: 'jsonp',
        url: 'http://127.0.0.1/talentcommunity/getuserinfo',
        autoAppendParams: false,
        reader: {
          type: 'json'
        }
     }
  }
});

Answer 1

See on sencha api: create model/store

1. Generate your model/store with same field name:

// Set up a model to use in our Store
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'username', type: 'string'},
        {name: 'password',  type: 'string'},
        {name: 'age',       type: 'int'},
        {name: 'token',  type: 'string'}
    ]
});

var myStore = Ext.create('Ext.data.Store', {
    model: 'User',

});

2. load data on store:

On "Ext.util.JSONP.request":

...
success: function(response) {

var jsonResponse = Ext.JSON.decode(response.responseText);
myStore.loadData(jsonResponse);

}

but I prefer use the proxy config on store:

var myStore = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
            type: 'ajax',
            url : 'http://127.0.0.1:4712/talentcommunity/getuserinfo',
            reader: {
                type: 'json',
                root: 'users'
            }
        }
}