PDA

View Full Version : Combobox renders valueField instead of displayField



ideamonk
23 Jun 2010, 2:20 AM
Hi guys,

I'm using ExtJS 3.2.1, and trying to create a grid view with ComboBox for options.

This is how I'm creating a Combobox -



tools_getComboBox: function (column){
var comb = new Ext.form.ComboBox({
// TODO: shows numbers after dirtying an area.
triggerAction: 'all',
mode: 'local',
lazyInit: false,
displayField: 'name',
valueField: '@value',
forceSelection: true,
typeAhead: true,
inputType:'text',
store: new Ext.data.JsonStore({
autoLoad: true,
url: this.base_url + "/options.json?field=" + column,
root: 'option',
fields:[
{
name:'@value',
},
{
name:'name', // $ as key is incompatible with extjs
mapping:'$',
}
]
}),
});
comb.on('change', function(combo, newValue, oldValue){
var record = combo.findRecord(combo.valueField, newValue);
console.log(record);
// combo.setValue(record.data.name); < fails
// combo.setValue("Foo"); < puts Foo everytime
});
return comb;
},


The remote json store "/options.json?field=foo" brings back a json in this format -


{
"@name": "opt_pr_nationality",
"@field": "opt_pr_nationality",
"@id": "pr_person_opt_pr_nationality",
"option": [
{
"@value": ""
},
{
"@value": "1",
"$": "Afghanistan"
},
{
"@value": "2",
"$": "Albania"
},
{
"@value": "3",
"$": "Algeria"
},


Where $ is mapped to 'name' used as displayField and @value as valueField for combobox.

Now initially everything works fine, it displays country names as expected -
http://web6.twitpic.com/img/119619831-3849b3dce54d74419887acb50a11c31b.4c21e228-full.png
http://twitpic.com/1z7v93/full

The combobox transforms in edit mode and lets the user select -
http://web16.twitpic.com/img/119619910-643fb830d5d1ebee6bb6106803f8ab2e.4c21e228-full.png
http://twitpic.com/1z7vba/full

But as soon as one finishes the selection, the value represented changes into the numerical index -
http://web12.twitpic.com/img/119619973-4ec06c8c170fa032ae8b4fb943ecdc49.4c21e228-full.png
http://twitpic.com/1z7vd1/full

^ here the console has logged the record from 'change' event as in


var record = combo.findRecord(combo.valueField, newValue);
console.log(record);


I also tried fixing the value of combobox in change event itself trying to hack it, but still no use. Could you tell me where could've I gone wrong?

Thanks :)

Condor
23 Jun 2010, 3:03 AM
The combobox is not used when you are not editing the field. You'll have to create a renderer that displays the text instead of the value in the cell.

The easiest method is using a combocolumn (http://www.sencha.com/forum/showthread.php?67488-3.x-Ext.grid.ComboColumn-amp-Ext.util.Format.comboRenderer).

ideamonk
23 Jun 2010, 5:01 AM
Hey Condor,

Thanks a lot that was really helpful. I observed that in Ext.util.Format.comboRenderer , combo.findRecord was failing, realized that as with remote json stores, they really need to be loaded before the comboRenderer acts up.

So, now I'm just explicitly loading the store and am able to utilize comboRenderer :)

Thanks a lot,

:) ideamonk