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.

Answer 1

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.