extJs 下拉框聯(lián)動(dòng)實(shí)現(xiàn)代碼
更新時(shí)間:2010年04月09日 13:27:19 作者:
extJs 下拉框聯(lián)動(dòng)實(shí)現(xiàn)代碼,需要的朋友可以參考下。
復(fù)制代碼 代碼如下:
// 第一個(gè)下拉框
var parentStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'loadByParentid.action?parentid=1001'
}),
reader: new Ext.data.JsonReader({
root: 'list',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'name'}
])
});
// 第二個(gè)下拉框
var childStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
//這里是參數(shù)可以順便寫,這個(gè)數(shù)據(jù)源是在第一個(gè)下拉框select的時(shí)候load的
url: 'loadByParentid.action?parentid=1001'
}),
reader: new Ext.data.JsonReader({
root: 'list',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'name'}
])
});
{
fieldLabel: '請(qǐng)選擇分類',
xtype:'combo',
store: parentStore,
valueField :"id",
displayField: "mc",
mode: 'local',
forceSelection: true,//必須選擇一項(xiàng)
emptyText:'請(qǐng)選擇分類...',//默認(rèn)值
hiddenName:'interviewsDetail.parent_category',//hiddenName才是提交到后臺(tái)的input的name
editable: false,//不允許輸入
triggerAction: 'all',//因?yàn)檫@個(gè)下拉是只能選擇的,所以一定要設(shè)置屬性triggerAction為all,不然當(dāng)你選擇了某個(gè)選項(xiàng)后,你的下拉將只會(huì)出現(xiàn)匹配選項(xiàng)值文本的選擇項(xiàng),其它選擇項(xiàng)是不會(huì)再顯示了,這樣你就不能更改其它選項(xiàng)了。
//allowBlank:false,//該選項(xiàng)值不能為空
id : 'parent_id',
name: 'parent',
width: 400,
listeners:{
select : function(combo, record,index){
childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value});
childStore.load();
}
}
},{
xtype:'combo',
store: childStore,
valueField :"id",
displayField: "mc",
//數(shù)據(jù)是在本地
mode: 'local',
forceSelection: true,//必須選擇一項(xiàng)
emptyText:'請(qǐng)選擇子分類...',//默認(rèn)值
hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后臺(tái)的input的name
editable: false,//不允許輸入
triggerAction: 'all',//因?yàn)檫@個(gè)下拉是只能選擇的,所以一定要設(shè)置屬性triggerAction為all,不然當(dāng)你選擇了某個(gè)選項(xiàng)后,你的下拉將只會(huì)出現(xiàn)匹配選項(xiàng)值文本的選擇項(xiàng),其它選擇項(xiàng)是不會(huì)再顯示了,這樣你就不能更改其它選項(xiàng)了。
//allowBlank:false,//該選項(xiàng)值不能為空
fieldLabel: '選擇',
id : 'child_id',
name: 'child',
width: 400
}
您可能感興趣的文章:
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- 省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
- jsp從數(shù)據(jù)庫獲取數(shù)據(jù)填充下拉框?qū)崿F(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法
- js實(shí)現(xiàn)的下拉框二級(jí)聯(lián)動(dòng)效果
- js 自定義的聯(lián)動(dòng)下拉框
- JavaScript Ajax Json實(shí)現(xiàn)上下級(jí)下拉框聯(lián)動(dòng)效果實(shí)例代碼
- jQuery+jsp下拉框聯(lián)動(dòng)獲取本地?cái)?shù)據(jù)的方法(附源碼)
- 原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼
- javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例演示
- js實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)
相關(guān)文章
Extjs中ComboBoxTree實(shí)現(xiàn)的下拉框樹效果(自寫)
最近涉及到的一個(gè)項(xiàng)目中,需要實(shí)現(xiàn)ComboBoxTree的效果,由于在Extjs中是沒有這種效果,所以看看別人的資料自己寫了一個(gè),感興趣的朋友可以參考下哈2013-05-05Ext GridPanel加載完數(shù)據(jù)后進(jìn)行操作示例代碼
Ext GridPanel加載完數(shù)據(jù)后進(jìn)行操作,比如load數(shù)據(jù)之后選定某些行數(shù)據(jù),下面有個(gè)示例,需要的朋友可以參考下2014-06-06extjs表格文本啟用選擇復(fù)制功能具體實(shí)現(xiàn)
extjs提供了方便的表格組件grid供使用,但是默認(rèn)情況下表格中的文本是不能被選中的,自然也是無法復(fù)制的,下面就為大家介紹下選擇復(fù)制功能如何啟用,感興趣的朋友可以了解下2013-10-10ComboBox 和 DateField 在IE下消失的解決方法
開發(fā)過程中卻遇到了在 IE 瀏覽器中放大、縮小窗口大小會(huì)導(dǎo)致這兩個(gè)組件消失不見不報(bào)任何錯(cuò)誤且在其他瀏覽器正常,通過本文你將學(xué)會(huì)如何解決此問題2013-08-08Extjs4中的分頁應(yīng)用結(jié)合前后臺(tái)
本文為大家介紹下Extjs4中的分頁如何使用且結(jié)合前后臺(tái),具體的示例如下,感興趣的朋友可以參考下2013-12-12Extjs學(xué)習(xí)筆記之三 extjs form更多的表單項(xiàng)
本文接著上講Extjs學(xué)習(xí)筆記之二 Extjs之Form介紹Extjs的表單。Extjs除了類似普通的html form的表單項(xiàng)之外,還有一些功能更為豐富實(shí)用的表單項(xiàng)。2010-01-01