Map JSON Object to Model/Store

Question

I'm using Worklight framework to construct a mobile app for IOS, and is using Sencha Touch 2.3 to build the app.

Due to the environment, i cannot use proxy in Sencha Touch Store/Model objects to load data from the server, as i would need to use Worklight's adapter to retrieve the info. I have managed to do that using some boilerplate codes.

However, i wish that i could utilize the Sencha Model more, and as such, am thinking whether it is possible for me to load a JSON object into the Model object automatically, without specifying a proxy.

Currently i'm doing a lot of loop and setter call to load the data from the JSON object to a model, like below:

var profile = Ext.create('Profile', {
Id: rawProfile.Id,
Name: rawProfile.Name
Age: rawProfile.Age
.....
}

where rawProfile is the JSON object i loaded from the server.

Any way i can make this cleaner?

Answer 1

You could create a Model class which would contain the data contained in your rawProfile object.

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'Id',
        name: 'Age',
        ...
    }],
    proxy: {
        type: 'memory',
        reader: 'json'
    }
});

I've also set an in memory proxy which will read json objects.

You could then create a Store which would use the model you defined and the in memory proxy (meaning you wouldn't be using Ext's build in ajax messaging).

Ext.create('MyStore', {
    model: 'MyModel',
    autoLoad: false
});

Setting the autoLoad to be false, as you want to get the data from a different source. Therefore, once you have your json object you can load it into the store by calling store.loadRawData(jsonObject).

In this case, the jsonObject would be the object containing all the json objects returned from the server, meaning that your code doesn't have to handle iterating through the records and you can leave it to the Sencha classes. However you would need to figure out the writing data back to the server.

I'd recommend running through the Sencha Data Package tutorial as it gives a good intro to the data package