ExtJs combo box: not populating custom value after load (forceSelection is false)

Question

In ExtJs4, I have a form with a combo box, where the data gets loaded from the database in json via

this.getForm().load({url: '/ext/get-patient', ...

where the user is allowed to enter a custom value besides the predefined ones, configured via the forceSelection attribute set to false.

The problem I experience is:

when the user selects any of the predefined values from the store in the combo box, saves and reloads the entry again, everything works fine. But when the user enters a custom value (i.e. "abcde") into the combo box field, saves (and I can see that the entered custom value is stored correctly in the database), and then loads the form data again (correct custom value is in json response), the combo box would then not be populated with this custom value after the loading process.

Why - or how to solve it?

This is the store definition used by the combo box:

// The data store for the diagnoses combobox
var diagnosisStore = Ext.create('Ext.data.Store', {
    fields: ['label', 'value'],
    data: (function() {
        var data = [
            {label: '结膜炎', value: '结膜炎'},
            {label: '角膜炎', value: '角膜炎'},
            {label: '青光眼', value: '青光眼'},
            {label: '白内障', value: '白内障'},
            {label: '葡萄膜炎', value: '葡萄膜炎'},
            {label: '屈光不正', value: '屈光不正'},
            {label: '眼部异物', value: '眼部异物'},
            {label: '翼状胬肉', value: '翼状胬肉'},
            {label: '泪囊炎', value: '泪囊炎'},
            {label: '倒睫', value: '倒睫'},
            {label: '角膜溃疡', value: '角膜溃疡'},
            {label: '角膜白斑', value: '角膜白斑'},
            {label: '眼内炎', value: '眼内炎'}
            ];
        return data;
    })()
});

... and the combo box, note that forceSelection is set to false.

{
    xtype: 'combobox',
    name: 'diagnosis',
    fieldLabel: lang["patient.diagnosis"],
    labelWidth: 60,
    flex:1,
    store: diagnosisStore,
    valueField: 'value',
    displayField: 'label',
    typeAhead: true,
    queryMode: 'local',
    forceSelection: false
}

I also tried to run this line of code, in the listener after the json response has been successfully retrieved:

formPanel.getForm().findField('diagnosis').setValue(rec.data.diagnosis);

but it wouldn't populate unless the value I am settings is part of the store. So, why is it that a user can type anything into the combo box, but I can't do the same with setValue in code? Doesn't make sense to me.

Edit/Update:

The funny thing is: even though the custom value doesn't populate/isn't displayed to the user, it seems that the combo box nevertheless holds the custom value. Because when I call this line:

alert( formPanel.getForm().findField('diagnosis').getValue() );

it would actually show the value, which I've just tried to set via setValue(), in the alert dialog. Seems that this combo box component is a bit buggy.

Another issue I just found with this combo box in ExtJs: Also noted that blank values in the combo box don't get submitted in the form (json parameter in the request), only if I enter one empty space (" "), then the field is actually included in the submitted json parameters.

Check this question. I believe it's a related problem stackoverflow.com/questions/2023686/… — 0x6A75616E
Thanks, but it's a bit different. In my case, the custom value is not part of the store, that's the point. In code, I even try to do: formPanel.getForm().findField('diagnosis').setValue(rec.data.diagnosis); but it wouldn't let me. Only if the value in setValue is part of the store, it would populate properly. — Mathias Conradt
i think the problem is that the real data came from database, but the store is static... the store not related to database.. in my recent project... if i need data reference.. i will make it as a separated table.. so, store at my combo is always fetch from database — Egy Mohammad Erdin
I don't see the difference here, a record should be a record, regardless of it's source. Furthermore, I wouldn't even have a reference anyway, because as mentioned, the custom value isn't even part of my store. — Mathias Conradt

Mathias Conradt Mathias Conradt · Accepted Answer · 2011-08-26T04:22:36

I found a workaround, even though I still don't see why this should be necessary:

In the success listener, after the json response is loaded, I add the custom value to the store, then set the combo box to this newly added value:

success: function() {
    diagnosisStore.add({label: rec.data.diagnosis, value: rec.data.diagnosis});
    formPanel.getForm().findField('diagnosis').setValue(rec.data.diagnosis);
},

No idea why I would need to add the custom value to the store in this case when I want to use setValue, while the user can enter anything manually via keyboard.

ExtJs combo box: not populating custom value after load (forceSelection is false)

1 Answers