extjs combobox showing blank list

Question

Hi I'm having trouble making a comboBox, I'd really appreciate if you help me, here's the code for my store:

Ext.define('Benef', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name']

});
var bene = new Ext.data.Store({
    model: 'Benef',
    reader: new Ext.data.JsonReader({
        fields: ['id', 'name'],
        root: 'benef'
    }),
    proxy: new Ext.data.HttpProxy({
        url: '../data/benef.php'
    })
});

When benef.php is called, it sends names of people this way:

{
    "benef":[
        {"id":"1","name":"Person"},
        {"id":"2","name":"aPerson"},
        {"id":"3","name":"Per 2"},
        {"id":"4","name":"BeneP"},
        {"id":"5","name":"BeneA"}
    ]
}

And my comboBox code is:

dataIndex: 'benefOne',
width: 150,
header: 'Benef',
editor: {
    xtype: 'combobox',
    typeAhead: true,
    selectOnTab: true,
    allowBlank: false,
    autoSelect: true,
    editable: false,
    store: bene,
    mode: 'local',
    triggerAction: 'all',
    displayField: 'name',
    valueField: 'name',
    lazyRender: true,
    listClass: 'x-combo-list-small'
}

Everything seems to work fine when I run the script, firebug gets the answer from benef.php but when I click the combobox to display the values, it only shows a tiny blank field :s any ideas? Thanks in advance!

Answer 1

Add this property to you combobox:

displayField: 'name',
valueField: 'id'

Answer 2

I had the same problem, because I used complex field names in my model and these are not working with combobox. I.e. I had to change

fields:[
  {name:'employeeId.char10'},
  {name:'fullname.char50'}
], 

to

fields:[
  {name:'employeeId', mapping:'employeeId.char10'},
  {name:'fullname', mapping:'fullname.char50'}
],

and

displayField:'fullname.char50',
valueField:'employeeId.char10',

to

displayField:'fullname',
valueField:'employeeId',

Answer 3

Everything looks correct except one thing: try to put reader config into proxy config.

    //...
    proxy: new Ext.data.HttpProxy({
        url: '../data/benef.php',
        reader: new Ext.data.JsonReader({
            fields: ['id', 'name'],
            root: 'benef'
        })
    }),
    //...

Answer 4

try to change mode to queryMode

Answer 5

I think the code was not clear to some people so I am updating the code to provide a detailed understanding:

var httpProxy = new Ext.data.HttpProxy({
    url: '../data/benef.php'
});
var jsonReader = new Ext.data.JsonReader({
    fields: ['id', 'name'],
    root: 'benef'
});
var newStore = new Ext.data.SimpleStore({
    proxy: httpProxy,
    reader: jsonReader
});
var combobox = new Ext.form.ComboBox({
    store: newStore,
    //..........
});

This is how I am using in my code and its working fine.