EXTJS Combox - Store does load but doesn't show

1
votes

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"} ]}
3
extjsextjs4

3 Answers

0
votes

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

0
votes

Change combobox mode from local to remote mode: 'remote' and use json store:

store: {
    xtype: 'jsonstore',
    url: '/apps/crm_organizations/orgtype/',
    autoLoad: true,
    idProperty: 'id',
    root: 'data',
    fields: ['id','organizationtype'],
},
mode: 'remote'
0
votes

In your store ,you missing the root property

store: {
  storeId: 'zaza',       
  fields: [{name: 'id'}, {name: 'organizationtype'}],
  root: 'data',
  autoLoad: true,
  proxy: {
    type: 'ajax',
    url: '/apps/crm_organizations/orgtype/',
    reader: {
      type: 'json',
      root:'data'
    }
  }
}

and if your combo is query information across domains,then use jsonp configuration and use remote query for better performance