[英]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.