Extjs Combo box - Picker doesn't change

I have this code:

var comboStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
    url : '../cxf/rest/CustomerService/getGroups'
}),
reader : new Ext.data.JsonReader({
    fields : [ 'id', 'name' ]
}), 
autoLoad : true
});

and

var groupsCombo = new Ext.form.ComboBox({
name : 'GroupsCombo',
fieldLabel : 'Groups',
mode : 'local',
store : comboStore,
displayField : 'name',
triggerAction : 'all',
valueField : 'groupID',
selectOnFocus:true,
width : 130
});

When the page is loaded the v开发者_高级运维alues are populated successfully in the combo box. However, when I'm trying to select a value from the combo, the first value is always selected. I'm not talking programatically here, but even on the browser the first value would be selected.

Thanks

---

Sorry :S I don't know how I didn't notice this, but the the id in Json data store should be groupID istead of 'id'.. I changed this and it's working now.

---

Have you tried just using a JsonStore? Try doing something like this:

var comboStore = new Ext.data.JsonStore({
       id: 'JsonStore',
       idProperty: 'id',
       autoLoad: true,
       idProperty: 'id',
       root: <root of your JSON>,
       fields: [ 'id', 'name' ],
       proxy: new Ext.data.ScriptTagProxy({
           api: {
               read: '../cxf/rest/CustomerService/getGroups',
           }
       })
   });

Then use that is the Store for the ComboBox. A JsonStore automatically creates a JsonReader, which I think is where the conflict in your code is.