Sencha Touch: Get datastore json data into selectfield

Question

I have been having a rough time trying to get my selectfield to display my template data.

My TemplateStore looks like the following:

Ext.regModel('tempItems', {
   fields: [
       { name: 'Name', type: 'string' }
   ]
});

Ext.regStore('TempStore', {
   model: 'tempItems',
   autoLoad: true,
   proxy: {
      type: 'ajax',
      url: 'http://localhost:56132/Service.asmx/GetTemplateModels',
      reader: {
         type: 'json',
         root: 'd'
      }
   }
});

Selectfield code:

xtype: 'selectfield',
name: 'template',
style: 'background-color: inherit; margin-left: 8px',
store: 'TempStore',
displayField: 'Name',
valueField: 'Name'

JSON return data:

"{"d":[{"__type":"SenchaTouchProblem.TemplateModel","Name":"Test 1","id":1},{"__type":"SenchaTouchProblem.TemplateModel","Name":"Test 2","id":2},{"__type":"SenchaTouchProblem.TemplateModel","Name":"Test 3","id":3},{"__type":"SenchaTouchProblem.TemplateModel","Name":"Test 4","id":4},{"__type":"SenchaTouchProblem.TemplateModel","Name":"Test 5","id":5}]}"

Any help or pointers would be amazing!

I am uploading a sample project showing my problem here: http://www.vbninja.com/SenchaTouchProblem.zip

Thanks Ryan

Answer 1

Update:

After checking your code, you have several things wrong. First you are not using json, but xml so your reader is incorrect, and then you have a typo in autoload config option, it should be autoLoad (note the capital L, this was hard to detect by the way :) ), anyway try this:

App.stores.tempStore = new Ext.data.Store({
    model: 'tempItems',
    proxy: {
        type: 'ajax',
        url: '/Service.asmx/GetTemplateModels',
        reader: {
            type: 'xml',
            record: 'TemplateModel'
        },
        actionMethods: {
            create: 'POST',
            read: 'POST',
            update: 'PUT',
            destroy: 'DELETE'
        }
    },
    autoLoad: true
});