Json Parsing in ExtJs 4

Question

I am new to ExtJs 4.I am using Json to populate combo box,as follows,

JSON:

{
   "Patient": [
      {
         "id": 1,
         "emergencyPhone": "1234567890",
         "primaryInsuranceId": {
            "id": 1
         },
         "secondaryInsuranceId": {
            "id": 2
         },
         "personalInfo": {
            "id": 2,
            "firstName": "James",
            "lastName": "Anderson",
            "address": {
               "state": {
                  "id": "2",
                  "stateName": "Alaska",
                  "code": "AK"
               },
               "zipcode": 12345,
               "country": "USA",
               "telephone": "1234567890",
               "alternatePhone": "1234567890",
               "faxNumber": "1234567890",
               "email": "james@gmail.com"
            },
            "gender": "Male",
            "dob": "2012-04-02",
            "ssn": 123456789,
            "race": "race"
         },
         "clearinghouseId": {
            "id": 2,
            "name": "ALPHA Clearing House"
         },
         "provider": []
      }
   ]
}

Code:

Ext.define('patientList', {
    extend: 'Ext.data.Model',
    fields: ['id', 'personalInfo']
});

var patient = Ext.create('Ext.data.Store', {
    model: 'patientList',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: url + '/lochweb/loch/patient/getAll',
        reader: {
            type: 'json',
            root: 'Patient'
        }
    }
});

Combo Box

{
    xtype: 'combo',
    fieldLabel: 'Patient',
    name: "patientId",
    id: "patientId",
    queryMode: 'local',
    store: patient,
    displayField: 'personalInfo.firstName',
    valueField: 'id',
    emptyText: "Select",
    editable: false,
    allowBlank: false
}

When i click the combo box,it shows firstname but after selecting that,it is not displaying in drop down.Any Help

Thanks

Answer 1

Change your Model like this:

Ext.define('patientList', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'myId', mapping: 'personalInfo.id' },
        { name: 'myFirstName', mapping: 'personalInfo.firstName' }
    ]
});

Then change your Combo like this:

{
    xtype: 'combo',
    fieldLabel: 'Patient',
    name: "patientId",
    id: "patientId",
    queryMode: 'local',
    store: patient,
    displayField: 'myFirstName',  // Change This
    valueField: 'myId',           // Change This
    emptyText: "Select",
    editable: false,
    allowBlank: false
}

Read more about Mapping and Convert configs.