extjs combobox showing blank list - extjs

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.