ComboBox.setRawValue/setValue remote store

[arT le Vark]

I have a combobox (cmbUserGroupId) with a remote store(autoLoad=false) defined in a view (SCRUMPLUS.view.User)

When a user dblclicks a grid item my controller fires the following function:


onEditUser:function(view,record,item,index,e,options)
{
var wndUser = Ext.create("SCRUMPLUS.view.User",{
title:Ext.String.format("Edit User [{0} {1}]",record.data.firstName,record.data.lastName),
isNew:false
});

var form = wndUser.down("form");

form.loadRecord(record);

form.getComponent("txtLogin").setReadOnly(true);

form.getComponent("cmbUserGroupId").setValue(record.data.userGroupId);
form.getComponent("cmbUserGroupId").setRawValue(record.data.userGroupLabel);


wndUser.show();
}

The combobox-part is how I used to do things in Ext 3, so even tho the store wasn't loaded, the combobox still displayed the "userGroupLabel", but when I called "getValue" it would return the "userGroupId" .
When I now (Ext4) try a "getValue" on the combobox or "form.getValues" it returns the raw value :(


saveUser:function(button,e,opt)
{
var win = button.up("window");
var form = win.down("form");
window.alert(form.getComponent("cmbUserGroupId").getValue());
//callAjax(this.onSaved,"UserService.svc/SaveUser",{user:form.getValues(),isNew:win.isNew},this,{close:false});
}

Is this behavior changed? Or am I missing something?

[arT le Vark]

None of my combo's use free typing so a quick fix:


Ext.form.field.ComboBox.override( {
getValue:function(){
return this.value;
}
});

kinda like this Extjs 4 overrides, will be hard not to abuse it :)

[mberrie]

Yeah, the rawValue/value handling in ComboBox makes me twist my brain hard every time I have a look at the source code. :)

Check this out:



getValue: function() {
// If the user has not changed the raw field value since a value was selected from the list,
// then return the structured value from the selection. If the raw field value is different
// than what would be displayed due to selection, return that raw value.
[...]

if (me.getDisplayValue() !== rawValue) {
value = rawValue;
me.value = me.displayTplData = me.valueModels = null;
[...]
}

return value;
},


In your scenario the raw value (groupLabel) will take precedence over the value (groupId).


Try something like this instead (I assume that your user model is a flat data object, and does not use a belongsTo association to reference the userGroup):



var group = Ext.create("SCRUMPLUS.view.UserGroup",{
id: record.data.userGroupId,
label: record.data.userGroupLabel
})
combo.setValue(group);




This should behave nearly the same as if you had selected an entry from the ComboBox list, i.e. render the display value and set the raw value.

Possible problems:

after your store has been loaded, mapping your manually created userGroup model to the one in the list might fail, that's something you have to examine
if your store is already loading while you set the value, another ComboBox mechanism (in setValue) kicks in that will defer evaluation of the display value until the store has finished loading. Until then, the ComboBox will not display any value at all.