ExtJS 3.4 - comboBox linked

Question

First of all, sorry for my english. Undoubtedly, before writing, I searched a lot, but without success.

I have two comboBox linked. The first :

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

});

json result :

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

The second :

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

json result :

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

the link: 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
});

Then both comboBox are in a FormPanel. The link works, but i have a problem : see attachment The drop-down list is linked, but there is always a default value. To follow the example, if I click on the value "agde", the second item, at the end, I always have the first value ("vias").

The problem is hard to solve (no problem with Firebug).

Thank you.

Answer 1

Try to use filter

Filter the records by a specified property. Alternatively, pass an array of filter options to filter by more than one property. Single filter example: store.filter('name', 'Ed', true, true)

I have created an sencha fiddle demo hope this will help you to solve problem or achieve your requirement.

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

});