ExtJS 3.4 - comboBox lié

Question

Tout d'abord, désolé pour mon anglais. Sans aucun doute, avant d'écrire, j'ai beaucoup cherché, mais sans succès.

J'ai deux comboBox liés. Le premier:

var groupe_cible = new Ext.data.JsonStore({ 
    url : "data/fonctions_data.php?pFunction=access_group&user_id=" + p, 
    fields: [ 
     {name: 'value', mapping: 'value', type: 'string'}, 
     {name: 'id', mapping: 'id_group', type: 'int'} 
    ], 
    autoLoad : true 

}); 

résultat json:

[{"value":"fibre","id_group":1},{"value":"eau_pluviale","id_group":2}] 

La seconde:

var param_cible = new Ext.data.ArrayStore({ 
//pruneModifiedRecords: true, 
    autoDestroy: true, 
    url : "data/fonctions_data.php?pFunction=access_param&user_id=" + p, 
    fields: [ 
      {name: 'value', mapping: 'value', type: 'string'}, 
      {name: 'id', mapping: 'id', type: 'int'}, 
      {name: 'groupcode', mapping: 'groupcode', type: 'int'} 
    ], 
     autoLoad : true 
}); 

résultat json:

[{"value":"vias","id":2,"groupcode":2},{"value":"cahm","id":1,"groupcode":1},{"value":"agde","id":2,"groupcode":2}] 

le lien: id_group = groupcode

ComboBox =

var groupeCombo = new Ext.form.ComboBox({ 
    id: "contenutypetraitementdict", 
    x: 5, 
    y: 55, 
    width : 150, 
    store: groupe_cible, 
    emptyText:'Choisir le type de traitement', 
    valueField: 'id', 
    displayField: 'value', 
    typeAhead: false, 
    editable: false, 
    mode: 'local', 
    allowBlank:false, 
    forceSelection: true, 
    border: false, 
    triggerAction: 'all', 
    //lastQuery: '', 
    selectOnFocus:true, 
    listeners: { 
     select : function(cmb, group, idx) { 
      autosStore = paramCombo.getStore(); 
      paramCombo.clearValue(); 
      autosStore.clearFilter(); 
      autosStore.filterBy(function(item) { 
       var paramCode = item.get('groupcode'); 
       var selected = (paramCode === group.data.id); 
       return selected; 
      }); 
      paramCombo.enable(); 
     } 
    } 
}); 

var paramCombo = new Ext.form.ComboBox({ 
    id: "contenutypetraitementdictparam", 
    x: 5, 
    y: 85, 
    width : 150, 
    store: param_cible, 
    emptyText:'Choisir le type de traitement', 
    allowBlank:false, 
    valueField: 'id', 
    displayField: 'value', 
    //border: false, 
    typeAhead: false, 
    editable: false, 
    mode: 'local', 
    forceSelection: true, 
    triggerAction: 'all', 
    lastQuery: '', 
    selectOnFocus:true 
}); 

Ensuite, les deux comboBox sont dans un panneau FormPanel. Le lien fonctionne, mais j'ai un problème: see attachment La liste déroulante est liée, mais il y a toujours une valeur par défaut. Pour suivre l'exemple, si je clique sur la valeur "agde", le deuxième élément, à la fin, j'ai toujours la première valeur ("vias").

Le problème est difficile à résoudre (pas de problème avec Firebug).

Merci.

Answer 1

Essayez d'utiliser filter

filtre les enregistrements d'une propriété spécifiée. Vous pouvez également passer un tableau d'options de filtre pour filtrer par plusieurs propriétés. Exemple de filtre unique: store.filter ('nom', 'Ed', true, true)

J'ai créé une démo de sencha fiddle qui vous aidera à résoudre le problème ou à atteindre votre objectif.

Ext.onReady(function() { 

    //groupe_cible store 
    var groupe_cible = new Ext.data.JsonStore({ 
     fields: [{ 
      name: 'value', 
      mapping: 'value', 
      type: 'string' 
     }, { 
      name: 'id', 
      mapping: 'id_group', 
      type: 'int' 
     }], 
     type: 'ajax', 
     url: 'groupe_cible.json', 
     type: 'json', 
     root: 'data', 
     autoLoad: true 
    }); 

    //param_cible store 
    var param_cible = new Ext.data.JsonStore({ 
     fields: [{ 
      name: 'value', 
      mapping: 'value', 
      type: 'string' 
     }, { 
      name: 'id', 
      mapping: 'id', 
      type: 'int' 
     }, { 
      name: 'groupcode', 
      mapping: 'groupcode', 
      type: 'int' 
     }], 
     type: 'ajax', 
     url: 'param_cible.json', 
     type: 'json', 
     root: 'data', 
     autoLoad: true 
    }); 

    //groupe_cible combo 
    var item1 = new Ext.form.ComboBox({ 
     mode: 'local', 
     triggerAction: 'all', 
     listClass: 'comboalign', 
     typeAhead: true, 
     forceSelection: true, 
     selectOnFocus: true, 
     displayField: 'value', 
     emptyText: 'Select groupe_cible', 
     valueField: 'id_group', 
     store: groupe_cible, 
     listeners: { 
      select: function (combo, record) { 
       var param_cible = Ext.getCmp('param_cible'), 
        store = param_cible.getStore(); 
       param_cible.setDisabled(false).setValue(''); 
       store.clearFilter(); 
       store.filter('groupcode', combo.getValue()); 

       // You can also use getValue method of Combo 
       // store.filter('groupcode', record[0].get('id')); 
      } 
     } 
    }); 

    //param_cible combo 
    var item2 = new Ext.form.ComboBox({ 
     mode: 'local', 
     triggerAction: 'all', 
     listClass: 'comboalign', 
     typeAhead: true, 
     forceSelection: true, 
     selectOnFocus: true, 
     id: 'param_cible', 
     disabled: true, //initially param cibil will disable 
     emptyText: 'Select param_cible', 
     displayField: 'value', 
     valueField: 'id', 
     store: param_cible 
    }); 

    //create panel with both combo 
    new Ext.Panel({ 
     width: 250, 
     renderTo: document.body, 
     title: 'Filter in Combo on basis of selection', 
     items: [item1, item2] 
    }); 

});