1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    32
    Answers
    3
    Vote Rating
    1
    AlexLans is on a distinguished road

      0  

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

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


    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:
    Code:
    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:
    Code:
    <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:
    Code:
    [{"name":"Alex","number":"01661978"},{"name":"Anne-Marie","number":"027021984"}]


    This is the code for the datastore:
    Code:
    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.

  2. Found the problem, it was in my model.

    This was the old model:
    Code:
    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:
    Code:
    Ext.define('NormaMob.model.webpatient', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                 'name',
                 'number'
                ]
        }
    });
    and it works nice! Thanks for the help everyone.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Look at the console in developer tools of your browser. Any errors like the CORS error?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    32
    Answers
    3
    Vote Rating
    1
    AlexLans is on a distinguished road

      0  

    Default


    @Mitchell, No errors in the console log.

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

    Code:
    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?

  5. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    32
    Answers
    3
    Vote Rating
    1
    AlexLans is on a distinguished road

      0  

    Default


    Found the problem, it was in my model.

    This was the old model:
    Code:
    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:
    Code:
    Ext.define('NormaMob.model.webpatient', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                 'name',
                 'number'
                ]
        }
    });
    and it works nice! Thanks for the help everyone.

Thread Participants: 1

Tags for this Thread