EXTJS Combobox not selecting by valueField after expand

Question

I have written some code that works pretty well, but I have a strange bug Here is an example...

---

PLEASE WATCH MY COMBOBOX BUG VIDEO

---

Like I said, this works well every time datachanged fires - the right index is selected and the displayField is displayed but, everytime after I type some text in the combobox, later, when the "datachanged" fires, it wont display the displayField. Instead, it displays the value from the setValue method I launch.

The strange thing is that if I don't ever type text and change the selection with the mouse there is no bug. Finally, this appears only when I type text in the combobox.

Has anyone heard of this bug, have a solution, or some wise advice?

The Code !

Two data stores :

ficheDataStore = new Ext.data.Store({
    id: 'ficheDataStore',
    autoLoad: true,
    proxy: new Ext.data.HttpProxy({
        url: 'ficheDetail.aspx',      // File to connect to
        method: 'GET'
    }),
    baseParams: { clientId: clientId, Type: 'Fiche' }, // this parameter asks for listing
    reader: new Ext.data.JsonReader({   // we tell the datastore where to get his data from
        root: 'results'
    }, [
        { name: 'GUID', type: 'string', mapping: 'GUID' },
        { name: 'TagClient', type: 'string', mapping: 'TagClient' },
        { name: 'Nom', type: 'string', mapping: 'Nom' },
        { name: 'Compteur', type: 'string', mapping: 'CompteurCommunes' },
        { name: 'CompteurCommunesFacturation', type: 'string', mapping: 'CompteurCommunesFacturation' },
        { name: 'AdresseFacturation', type: 'string', mapping: 'AdresseFacturation' },
        { name: 'Codes', type: 'string', mapping: 'Codes' },
        { name: 'Observations', type: 'string', mapping: 'Observations' },
        { name: 'Adresse', type: 'string', mapping: 'Adresse' }

      ])
});

 communesDataStore = new Ext.data.Store({
    autoLoad: true,
    proxy: new Ext.data.HttpProxy({ url: 'ficheDetail.aspx?Type=Communes' }),
    reader: new Ext.data.JsonReader({ root: 'results' }, [{ name: 'Compteur' }, { name: 'Localisation'}])
});

---

Who return something like this for the first:

  {results:[{"Nom":"cercle interieur"},{"Observations":""},{"Codes":" "},{"Adresse":"dd"},{"CompteurCommunes"
    :"1"},{"TagClient":"3-56"},{"GUID":"443609c6-d064-4676-a492-7baa7b4288d1"},{"AdresseFacturation":""}
    ,{"CompteurCommunesFacturation":"1"}]}

For the latter :

{"results":[{ "Compteur" : "1","Localisation" : "6200  ST ISIDORE"},{ "Compteur" : "2","Localisation"
 : "21340 CHANGE"},{ "Compteur" : "3","Localisation" : "1200  ELOISE"},{ "Compteur" : "4","Localisation"
 : "1200  ST GERMAIN SUR RHONE"},{ "Compteur" : "5","Localisation" : "75000 PARIS"},{ "Compteur" : "6"
,"Localisation" : "75001 PARIS 1ER ARRONDISSEMENT"}]}

---

a Combobox :

 var comb = new Ext.form.ComboBox(
             {
               store: communesDataStore,
               fieldLabel: 'Code postal',
               // hiddenName: 'Compteur',
               name: 'CompteurCommune',
               id: 'CompteurCommunes',
               width: 300,
               typeAhead: true,
               mode: 'local',
               minChars: 0,
               selecOnFocus: true,
               forceSelection: true,
               valueField: 'Compteur',
               displayField: 'Localisation',
               autocomplete: true,
               emptyText: 'Selectionnez un code postal',
               triggerAction: 'all',
               value: ''
              });

in a datachanged event i set the new value of the Combobox "CompteurCommunes" :

   ficheDataStore.addListener('datachanged', handleDatachangedEvent);

     function handleDatachangedEvent() 
       {
        try {
              comb.setValue(ficheDataStore.getAt(4).data.Compteur);                                                                                 
            }
        catch (err) { }
        }

Answer 1

First, the Ext JS combobox should automatically apply the value and display when an item is selected, barring you've assigned a store and told Ext the field requires a value.

The value you appear to be asking for (CompteurCommunes) does not appear in your reader definitions, so it would be a part of the records in the data store.

What is the underlying reason for why you are trying to set this value for the ComboBox?

Answer 2

It's probably because when you type random data into combo, it may not locate correct fieldValue every time. Then it stucks at the last non-existing value.

Try to set ComboBox to any existing value (in combo's datastore) before doing new setValue() in your datachanged event handler. Or you can try to use clearValue() method to reset the previous (undefined) valueField.

There also initList() method existing to reset combo to initial state.

EDIT: After some testing, I found that: combo.store.clearFilter(); must be used before setValue in the external event handler.

Answer 3

You can have a look at hiddenName and hiddenId parameter of Ext.form.ComboBox. If you set the value of hidden form field linked with combobox then combobox would render the label of that value instead of the value itself.

This is useful when you need to set the value at server end and direct the user to the page.

Another useful method is selectByValue. This method would select the element that has the value equal to the passed argument.

In your dataChangedListener instead of setting the value of combobox, you should set the value hidden form field associated with ComboBox. Also after setting the value of hidden field you might have to fire selectByValue method.

You can have a look at ExtJS API Documentation for further reference.

Answer 4

function formatComboBox(value, metaData, record, rowIndex, colIndex, store) {
        myStore = Ext.getCmp('myComboBox');
        myStore.clearFilter();
        var idx = myStore.find('value',value);
        return (idx != '-1') ? myStore.getAt(idx).data.label : value;
}