ExtJS combo setting problem

Question

Hi

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


    function 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

Answer 1

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, '');
});

Answer 2

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

});