why valuefield appear instade of displayfield when i put combobox inside gridpanel

[MElshennawy]

hi,
i'm New in Extjs4 and i have a problem
[why valuefield appear instade of displayfield when i put combobox inside gridpanel]
My Case Is:
I have gridpanel contain users data ,i put ComboBox With Name[displayfield] and Id[Valuefield] .
What Iwant Is:
When user Select name From Combobox ,message appear With the value field .
The problem Is :
When user select name from combobox message appear with the value field but the selected name[displayfield] disappear and the id [Valuefield] Appeared .
Could any one help me Please.
My code :


//================ Create grid to display data from store
var sm = Ext.create('Ext.selection.CheckboxModel');

var grid = new Ext.grid.Panel({
store: myStore,
id: 'ss',

autoExpandColumn: 'username',

selModel: sm,
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,
listeners: {
edit: function(e) {

}
}
})
],
columns: [ // Grid columns

{xtype: 'rownumberer', header: 'No' },
{
header: 'Name',





width: 130,
field: {
xtype: 'combobox',
store: namesStore,
allowBlank: true,
name: 'id',

valueField: 'id',
displayField: 'name',
editable: false,
typeAhead: true,
selectOnTab: true,
listeners: {
select: function(combo, record, index) {
alert(combo.getValue());

}

}

}
},

// { dataIndex: 'id', header: 'Id', hidden: true },
// {field: combo1, header: 'Names' },
{dataIndex: 'address', header: 'address', editor: 'textfield' },
{ dataIndex: 'email', header: 'E-mail', editor: 'textfield' },
{ dataIndex: 'hdate', header: 'Date', renderer: Ext.util.Format.dateRenderer('d/m/Y'), editor: 'datefield' }

],
renderTo: 'dvViewData',
width: 600,
height: 300,
tbar: [
{
text: "Add User",
handler: function() {
//make a new empty User and stop any current editing
var newUser = new User({});
// rowEditor.stopEditing();
//add our new record as the first row, select it
grid.store.insert(0, newUser);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);

//start editing our new User
rowEditor.startEditing(0);
}
}
]




});

[tobiu]

well, the grid displays only the data of the store, which is in your case the valueField.
to change that behaviour, you have renderer methods for each columns available.

for a solution take a look at:
http://www.sencha.com/forum/showthread.php?147931-Grid-with-Combobox

[skirtle]

Please use [CODE] tags when posting code (# button on the editor toolbar).

If I've understood correctly then your problem is that after editing is complete the wrong value is shown in the grid cell?

Once editing completes the grid's record is updated using the value obtained from calling combobox.getValue(). This will return the selected value's valueField entry. Once this value is in the grid's store it follows that it will be shown in the grid.

How you solve this problem depends on what value you want stored in your records. If your grid records should be updated using the value in your name field then simply remove the valueField config and it will default to using the same value as your displayField.

Alternatively, if you want the id to be stored in your records then you'll need to add a renderer function to your grid column to map the value in the record to its display value in the grid. The following ExtJS 3 docs show a technique for doing this with a wrapper around a combobox:

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.ComboBox

The technique is effectively the same for ExtJS 4, though it can be simplified a little using findRecordByValue:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.ComboBox-method-findRecordByValue