Trying to understand Stores/Requests/Models/Proxies/Readers

[dac0nvu]

I'm a newbie here and I'm trying understand the relationship between stores, models and the types of requests that are used.

I need to populate a Select widget that I call "sources" with a list of strings (key/value) that are pulled from a database. I've looked all over this forum seeing what others are doing and have a mish-mash of code that works, up to the point of where my callback function is called in my Ajax request. My "alert" statement is executed and an object is there ("Data = [object, Object]"), but it never loads into the Select. I also get an error that says:

TypeError: Result of expression 'record.get' [undefined] is not a function. ext-touch-debug.js:22777

Here is my code...

var sourcesModel = Ext.regModel('sources', {
    fields: [
    {
        name: "value",
        type: 'string'
    },

    {
        name: "label",
        type: 'string'
    }
    ]
});

var store = new Ext.data.JsonStore({
    id: 'sources-store',
    model: Ext.ModelMgr.types['sources']
});

Ext.Ajax.request({
    url: '/myurl/MobileServices',
    params: {
        command: 'getApps',
        arg: 'abc0xyz'
    },
    root: 'apps',
    callbackKey: 'callback',
    callback: function(data) {
        alert("Data = " + data);
        sources = data;
        store.loadData(sources);
        sources.options = store.data;
    }
});

var sources = new Ext.form.Select({
    name: 'messageSource',
    label: 'Message Source',
    id: 'messageSources',
        displayField: 'label',
        valueField: 'value',
        store: store,
        options: store.data

});

And this is the data that is being passed back from the Ajax request:

{"apps":[{"value":"T1","label":"Test1"}]}

In addition to getting this to work, I'm finding it hard to find any documentation that describes the relationships between stores/proxies/requests/readers/models. I think I understand what each one is, I just don't see a good explanation of how each one is defined (i.e. sometimes proxies are defined as their own variable, other times they are defined as part of a store).

Any help in both getting my code to work and a good explanation about how these things work would be greatly appreciated.

David

[dac0nvu]

Well I changed some things and I still see the data coming back, however I am now getting this error and the data is still not loading into the Select:

Ext.data.JsonReader.getResponseData: Unable to parse JSON returned by Server

But I'm not sure why....my JSON looks good:

{"apps":[{"value":"T1","label":"Test1"}]}

Here is the new code:

var sourcesModel = Ext.regModel('mysource', {
    fields: [
      {name: "value", type: 'string'},
      {name: "label", type: 'string'}
    ]
});


var store = new Ext.data.JsonStore({
    id: 'sources-store',
    model: Ext.ModelMgr.types['mysource'],
    root: 'apps',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        reader: {
            type: 'json',
            idProperty: 'value',
            root: 'apps'
        },
        url: '/myurl/MobileServices',
        actionMethods: {
            read: 'POST'
        },
        extraParams: {
            command: 'getApps',
            arg: 'abc0xyz'
        }
    }
    
});


var sourcesWidget = new Ext.form.Select({
    name: 'messageSource',
    label: 'Message Source',
    id: 'messageSources',
        displayField: 'label',
        valueField: 'value',
        store: store,
        options: store.data
});

So what am I missing? Is my JSON bad or something else?