EXTJS Combox - Store does load but doesn't show

Question

Given the following javascript:

var fo = Ext.create('Ext.form.Panel', {
    layout:'box',
    ...
    items: [{
        xtype: 'combobox',
        valueField: 'id',
        displayField: 'organizationtype',
        store: {
            storeId: 'zaza',                
            fields: [{name: 'id'}, {name: 'organizationtype'}],
            root: 'data',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: '/apps/crm_organizations/orgtype/',
                reader: {
                    type: 'json'
                }
            }
        },
        fieldLabel: 'Type relation',
        name: 'organizationtype',
        queryMode: 'local',
    },
            ...

This panel contains - among other fields - also this combobox. I can see with wireshark that the url '/apps/crm_organizations/orgtype/' is actually queried. However the combobox doesn't show any values. Has this anything to do with the fact that I'm lazy loading the combobox?

This is the response on the JSON request:

{data: [ {id:"1" ,organizationtype:"Customer"} 
,{id:"2" ,organizationtype:"Relation"} 
,{id:"3" ,organizationtype:"Supplier"} 
,{id:"4" ,organizationtype:"Unknown"} ]}

Answer 1

You have to set the root to the json reader you are using, Default is "", your's should be :

reader: {
                    type: 'json',
                    root: 'data'
                }

Also you might consider replacing the fields configuration with a model object.(from docs)fields: In general this configuration option should be avoided, it exists for the purposes of backwards compatibility