Problème de réglage de la liste déroulante ExtJS

Question

J'ai rencontré un problème intéressant lors de l'utilisation de combos sous forme d'entrée. Mon formulaire contient des combos qui obtiennent des données des magasins json. Cela fonctionne très bien lors de l'ajout d'un nouvel enregistrement, mais lorsque le formulaire est ouvert pour éditer un enregistrement existant, l'ID n'apparaît parfois pas comme sa valeur (par exemple: il y en a 5 au lieu de "apple"). Je pense qu'il essaie de définir la valeur avant qu'il ne finisse de charger le combo.

Existe-t-il un moyen de résoudre ce problème? je mets le code ici qui crée des 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

bmoaskau votre solution est bien que je préfère le faire via un plug-in pour mes combos. essayer, fonctionne comme un charme pour moi, de se lier à un combo simplement ajouter

plugins: new Application.plugins.comboloadvalue(), 

à votre objet config combo

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

}); 

Answer 2

Les magasins qui chargent des données à distance le font de manière asynchrone, de sorte que vous devriez toujours faire le traitement des données de magasin dans le rappel approprié pour veiller à ce qu'il est prêt. Par exemple, quelque chose comme:

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

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

Answer 3

Voici une alternative qui fonctionnera de façon transparente pour tous combos:

Ajouter ce hack quelque part avant de charger des combos (ne doivent pas être après le document prêt)

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

Cela va essentiellement vérifier si votre valeur est dans votre magasin, et si ce n'est pas le cas, effectuez un rappel avec valueField = valeur, puis réessayez. Vous avez juste besoin de vous assurer que votre gestionnaire de serveur cherche "requête" pour les recherches et le champ clé pour les charges.

Cela a aussi l'avantage de travailler avec des combos de type "recherche" qui peuvent avoir un magasin chargé, mais avec les mauvais enregistrements