Problems with WCF, JSON and Sencha List won't show data

[AlexLans]

Hello,

For a couple of days I'm struggling with a problem. I have a Sencha project with a List control in it. I want the list control to get it's data by WCF. The problem is: I know the data is returned in JSON format, but the list will not show the data. It does show the items but the tag {name} and {number} are empty. Could somebody help me out here please? I've put the most important code down below. Oh... the code is vb.net but it's alsmot the same as C#

The panel with the list:

var patientlist = Ext.create('Ext.data.Store', {
    proxy: { url: 'http://localhost:50750/wcfservices/wcf_patients.svc/getPatientsappointments/20120101',
             type: 'ajax', 
             method: 'GET'
            },
    model: NormaMob.model.webpatient
     });

{
                    xtype: 'panel',
                    height: patientListheight,
                    layout: {
                        type: 'fit'
                    },
                    items: [
                    {
                        xtype: 'list',
                        itemTpl: [
                            '<div>1 {name} : {number}</div>'
                        ],
                        store: patientlist,
                        plugins: [
                            {
                                pullRefreshText: 'Pull down to refresh...',
                                releaseRefreshText: 'Release to refresh...',
                                type: 'pullrefresh'
                            }
                        ]
                    }
                ]
                }

When the List is pulled down the WCF service is called.
Code of the WCF:

<ServiceContract()>
Public Interface Iwcf_patients

    <OperationContract()> _
    <WebInvoke(Method:="GET", ResponseFormat:=WebMessageFormat.Json, _
               BodyStyle:=WebMessageBodyStyle.Bare, UriTemplate:="getPatientsappointments/{app_date}")>
    Function getPatientsappointments(app_date As String) As List(Of webpatient)


End Interface

Public NotInheritable Class wcf_patients
    Implements Iwcf_patients

#Region " Implementation of Iwcf_patients "

    Public Function getPatientsappointments(app_date As String) As List(Of webpatient) _
        Implements Iwcf_patients.getPatientsappointments
        Dim tmpList As New List(Of webpatient)
        tmpList.Add(New webpatient With {.name = "Alex", .number = "01661978"})
        tmpList.Add(New webpatient With {.name = "Anne-Marie", .number = "027021984"})
        Return tmpList
    End Function

#End Region

<DataContract()> _
Public Class webpatient
    <DataMember()> _
    Public name As String
    <DataMember()> _
    Public number As String
End Class

When I enter the URL in Chrome to the WCF this is the JSON string that's returned:

[{"name":"Alex","number":"01661978"},{"name":"Anne-Marie","number":"027021984"}]

This is the code for the datastore:

Ext.define('NormaMob.model.webpatient', {
    extend: 'Ext.data.Model',
    fields: [
             { name: 'name', type: 'string' },
             { name: 'number', type: 'string' }
            ]
});

When I refresh the list I see two items, but I only see the "1 :" from the itemTpl.

I hope that somebody can help me out with this problem. Thank you already for reading.

[mitchellsimoens]

Look at the console in developer tools of your browser. Any errors like the CORS error?

[AlexLans]

@Mitchell, No errors in the console log.

I've put in some logging and I see 2 records arriving.

var patientlist = Ext.create('Ext.data.Store', {
    model: NormaMob.model.webpatient,
    proxy: { url: 'http://localhost:50750/wcfservices/wcf_patients.svc/getPatientsappointments/' + convertdateToWCFstring(selectedDate),
        type: 'ajax',
        method: 'GET',
        reader: {
            type: 'json'
        }
    },
    autoLoad: true,
    listeners: {
        load: function (store, records) {
            console.log('Loaded records for: ' + convertdateToWCFstring(selectedDate) + ' recordcount: ' + records.length);
        }
    }
});

This is what I see in the console log: Loaded records for: 2012618 recordcount: 2

Do I need to set an update or refresh the the list control?

[AlexLans]

Found the problem, it was in my model.

This was the old model:

Ext.define('NormaMob.model.webpatient', {
    extend: 'Ext.data.Model',
    fields: [
             {name: 'name', type: 'string'},
             {name: 'number', type: 'string'}
            ]
});

Now I've changed it to this:

Ext.define('NormaMob.model.webpatient', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
             'name',
             'number'
            ]
    }
});

and it works nice! Thanks for the help everyone.