Extjs - Populate combobox whit store not match - extjs

Question

I need populate a combobox whit a store, all work fine except one thing. ¿Why the store populate only the displayField and not the valueField.
In this line
form.loadRecord(records[1]);
I set that record in the form, is fine but when i try submit the form i hope the value "2" and not the value "Media".
The code and the example on Jsfiddle for better explanation.
http://jsfiddle.net/jjgrn/5/
var store = Ext.create('Ext.data.Store', {
fields: ['id', 'status'],
data: [
{ id: '1', status: 'Baja' },
{ id: '2', status: 'Media' },
{ id: '3', status: 'Alta' },
{ id: '4', status: 'Urgente' }
]
});
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Edit Country',
url: 'http://aaa.com/',
items: [
{
xtype: 'combobox',
fieldLabel: 'Nombre',
name: 'status',
anchor: '50%',
displayField: 'status',
valueField: 'id',
store: store
}
],
buttons: [
{
text: 'Guardar',
handler: function () {
var form = formPanel.getForm();
var value = form.getValues();
alert(value.status);
}
}
],
renderTo: Ext.getBody()
});
store.load({
scope: this,
callback: function(records, operation, success) {
var form = formPanel.getForm();
form.loadRecord(records[1]);
}
});
Thanks.

Answer 1

It's because form.loadRecord() doesn't do exactly what you're expecting it to do.
What you want it to do is to tell combobox to use that particual record (records[1]).
What it actually does is to tell combobox: "now set your value to Media", which combobox politely does though it's too "stupid" to associate it with particular record.
Here's the fixed version, not sure if such solution fits your needs:
http://jsfiddle.net/jjgrn/6/
var store = Ext.create('Ext.data.Store', {
fields: ['id', 'status'],
data: [
{ id: '1', status: 'Baja' },
{ id: '2', status: 'Media' },
{ id: '3', status: 'Alta' },
{ id: '4', status: 'Urgente' }
]
});
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Edit Country',
url: 'http://aaa.com/',
items: [
{
xtype: 'combobox',
fieldLabel: 'Nombre',
name: 'status',
anchor: '50%',
displayField: 'status',
valueField: 'id',
store: store
}
],
buttons: [
{
text: 'Guardar',
handler: function () {
var form = formPanel.getForm();
var value = form.getValues();
alert(value.status);
}
}
],
renderTo: Ext.getBody()
});
store.load({
scope: this,
callback: function(records, operation, success) {
// the operation object
// contains all of the details of the load operation
//var form = formPanel.getForm();
//form.loadRecord(records[1]);
formPanel.items.first().select(records[1]);
}
});

Answer 2

When you call form.getValues(), you only get the value, if you want the associated record for a value, you have to search the store. http://jsfiddle.net/jjgrn/7/
var rec = store.getById(value.status);
alert(rec.get('status'));
Key is understanding that getValues() just calls getValue() for each field in the form. getValue doesn't return a record, just the field from the record that you told it to use valueField: 'id',.