Extjs下combox 實現級聯
阿新 • • 發佈:2019-01-06
//**測試下拉框級聯**
var storedm = new Ext.data.Store({ //隊名稱下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getdm'
}),
reader: new Ext.data.JsonReader({
root: 'dms',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'mc'}
])
});
var storejh = new Ext.data.Store({ //井號選擇下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getjh' //這裡是引數可以順便寫,這個資料來源是在第一個下拉框select的時候load的
}),
reader: new Ext.data.JsonReader({
root: 'jhs',
id: 'jh'
}, [
{name: 'jh', mapping: 'jh'},
{name: 'jm', mapping: 'jm'}
])
});
//**測試下拉框級聯**
var storedm = new Ext.data.Store({ //隊名稱下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getdm'
}),
reader: new Ext.data.JsonReader({
root: 'dms',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'mc'}
])
});
var storejh = new Ext.data.Store({ //井號選擇下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getjh' //這裡是引數可以順便寫,這個資料來源是在第一個下拉框select的時候load的
}),
reader: new Ext.data.JsonReader({
root: 'jhs',
id: 'jh'
}, [
{name: 'jh', mapping: 'jh'},
{name: 'jm', mapping: 'jm'}
])
});
//單位欄位
var dwField = new Ext.form.ComboBox({
fieldLabel:'所屬隊',
name:'DW',
//hiddenName:'DW',//hiddenName才是提交到後臺的input的name(既select的value值)
allowBlank:false,
mode: 'local',
readOnly:true,
triggerAction:'all',
anchor:'90%',
emptyText:'請選擇...',//預設值
store:storedm,
listeners:{
select : function(combo, record,index)
{
jhField.clearValue(); //可以實現當隊下拉值變更時,清空之前井號下拉選項中的值
storejh.proxy= new Ext.data.HttpProxy({url: '../servlet/CommonMethod?command=' + combo.value}); //根據隊下拉選項的改變,動態取出對應的井
storejh.load(); //載入井下拉框的store
}
},
listClass: 'x-combo-list-small', //測試的屬性
lastQuery:'', //測試的屬性
valueField: 'id',
displayField: 'mc'
});
storedm.load(); //載入隊下拉框的資訊
//井號欄位
var jhField = new Ext.form.ComboBox({
xtype:'combo',
store: storejh,
valueField :"jh",
displayField: "jm",
//資料是在本地
mode: 'local',
//forceSelection: true,//必須選擇一項
emptyText:'請選擇井號...',//預設值
hiddenName:'JH',//hiddenName才是提交到後臺的input的name(既select的value值)
editable: false,//不允許輸入
triggerAction: 'all',//因為這個下拉是隻能選擇的,所以一定要設定屬性triggerAction為all,不然當你選擇了某個選項後,你的下拉將只會出現匹配選項值文字的選擇項,其它選擇項是不會再顯示了,這樣你就不能更改其它選項了。
allowBlank:false,//該選項值不能為空
fieldLabel: '井號',
id : 'jh_id',
name: 'JH',
anchor:'90%'
});