ExtJS combo setting problem

I run into an interesting problem while was using combos in input form. My form contains combos that get data from json stores. It works fine when adding new record, but when the form is opened for editing an existing record, sometimes the id appears as selected not its value (eg: there's 5 instead of "apple"). I think it tries to set the value before it finishes loading the combo.

Is there a way to solve this? I put the code down here that creates combos:

function dictComboMaker( store, fieldLabel, hiddenName, name, allowBlank, myToolTipp ) {
      comboo = {
      xtype : 'combo',
      id: 'id-'+name,
      allowBlank: allowBlank,
      fieldLabel : fieldLabel,
      forceSelection : true,
      displayField : 'value',
      valueField : 'id',
      editable: false,
      name: name,
      hiddenName : hiddenName,
      minChars : 2,
      mode: 'remote',
      triggerAction : 'all',
      store : store
     };


    functi开发者_运维知识库on dictJsonMaker(url) {
      store = new Ext.data.JsonStore({ 
      root : 'results', // 1
      fields : [ 'id','value' ],
      url : url,
      autoLoad: true});

      return store;
     }


    var comboKarStore = dictJsonMaker('/service/karok');
    var comboKar= dictComboMaker(comboKarStore, 'Kar', 'karid', 'kar', false, '');

    // then comboKar is added to the form

Hubidubi

bmoaskau your solution is good i prefer to do this via a plugin for my combos. give it a try, works like a charm to me, to bind it to a combo simply to add

plugins: new Application.plugins.comboloadvalue(),

to your combo config object

Ext.ns('Application.plugins');

Application.plugins.comboloadvalue = Ext.extend(Ext.util.Observable, {
field : null,

init : function(field){
    var self = this;
    this.field = field;
    this.store = field.getStore();
    this.setLoaded(false);

    this.store.on('load', function(){
        return self.onLoad();
    }, this);
},

onLoad : function(){
    if(this.store !== null){
        this.field.setValue(this.field.getValue());
        this.setLoaded(true);
    }
    return true;
},

setLoaded: function(bool){
    this.store.hasOnceLoaded = bool;
},

getLoaded: function(){
    return this.store.hasOnceLoaded;
}

});

Stores that load remote data do so asynchronously, so you should always do your processing of store data in the appropriate callback to ensure that it's ready. E.g., something like:

var comboKar, comboKarStore = dictJsonMaker('/service/karok');

comboKarStore.on('load', function(){
    comboKar = dictComboMaker(comboKarStore, 'Kar', 'karid', 'kar', false, '');
});

Here is an alternative that will work transparently for all combos:

Add this hack somewhere before you load any combos (doesn't have to be after document ready)

Ext.form.ComboBox.prototype.nativeSetValue = Ext.form.ComboBox.prototype.setValue;
Ext.form.ComboBox.prototype.setValue=function(v){
   var combo = this;
   if(this.valueField){
      var r = this.findRecord(this.valueField, v);
      if (!r) {
         var data = {}
         data[this.valueField] = v
         this.store.load({
            params:data,
            callback:function(){
               combo.nativeSetValue(v)
            }
         })   

      } else return combo.nativeSetValue(v);
   } else combo.nativeSetValue(v);
}          

This basically will check if your value is in your store, and if it is not, do a callback with valueField = value and then try setting again. You just need to make sure your serverside handler looks for "query" for searches and the key field for loads.

This also has the advantage of working with "search" type combos which may have a store loaded, but with the wrong records