簡體   English   中英

ExtJS 3.4-comboBox鏈接

[英]ExtJS 3.4 - comboBox linked

首先,對不起我的英語。 毫無疑問,在寫作之前,我進行了很多搜索,但沒有成功。

我有兩個comboBox鏈接在一起。 首先 :

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結果:

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

第二 :

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結果:

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

鏈接:id_group =組碼

組合框=

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

然后,兩個comboBox都位於FormPanel中。 該鏈接有效 ,但我有一個問題: 請參閱附件下拉列表已鏈接,但始終有一個默認值 以該示例為例,如果我單擊值“ agde” (第二個項目),最后總是有第一個值( “ vias” )。

這個問題很難解決(Firebug沒問題)。

謝謝。

嘗試使用過濾器

通過指定的屬性過濾記錄。 或者,傳遞一組過濾器選項以按多個屬性進行過濾。 單個過濾器示例:store.filter('name','Ed',true,true)

我創建了一個sencha小提琴演示,希望它能幫助您解決問題或達到您的要求。

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

});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM