Javascript – EXTJS Combobox not selecting by valueField after expand

comboboxextjsjavascript

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) { }
        }

Best Answer

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.

Related Topic