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 bobox, 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 bobox.

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' }

      ])
});

 munesDataStore = 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 b = new Ext.form.ComboBox(
             {
               store: munesDataStore,
               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',
               autoplete: 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 {
              b.setValue(ficheDataStore.getAt(4).data.Compteur);                                                                                 
            }
        catch (err) { }
        }

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 bobox, 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 bobox.

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' }

      ])
});

 munesDataStore = 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 b = new Ext.form.ComboBox(
             {
               store: munesDataStore,
               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',
               autoplete: 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 {
              b.setValue(ficheDataStore.getAt(4).data.Compteur);                                                                                 
            }
        catch (err) { }
        }

• javascript
• bobox
• extjs

5 Answers 5

It's probably because when you type random data into bo, 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 bo'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 bo to initial state.

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

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;
}

First, the Ext JS bobox 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?

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 bobox then bobox 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 bobox, 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.

In case anybody - like me - get here through google because it's the most similar to their ComboBox ft. setValue() problem:

After an hour of stepping in out and over Ext's internals, I found that I needed to set lazyInit: false for the bo boxes. It defaults to true and being true may cause unlogical behaviour if you don't know about this. And why would you? Anything else seems to be not lazy by default.