Extjs4.0 ComboBox如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)

當(dāng)前位置：首頁(yè) > 范文|應(yīng)用文 > IT技術(shù)專(zhuān)欄 > 網(wǎng)絡(luò)編程

來(lái)源：易賢網(wǎng) 閱讀：1064 次日期：2016-07-01 14:28:38

溫馨提示：易賢網(wǎng)小編為您整理了“Extjs4.0 ComboBox如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)”,方便廣大網(wǎng)友查閱！

很多網(wǎng)友在問(wèn)，Extjs4.0 ComboBox如何實(shí)現(xiàn)，好在之前用3.x實(shí)現(xiàn)過(guò)一個(gè)三級(jí)聯(lián)動(dòng)，如今用Extjs4.0來(lái)實(shí)現(xiàn)同樣的聯(lián)動(dòng)效果。其中注意的一點(diǎn)就是，3.x中的model:'local'在Extjs4.0中用queryMode: 'local'來(lái)表示，而且在3.x中Load數(shù)據(jù)時(shí)用reload，但是在extjs4.0中要使用load來(lái)獲取數(shù)據(jù)。如下圖：

代碼部分

先看HTML代碼：

<html >

<head>

</head>

<body>

</body>

</html>

簡(jiǎn)單的很，就是加載了基本的CSS文件和JS文件，并且加載自定義的combobox.js文件。

combobox.js：

Ext.require('Ext.*');

Ext.onReady(function(){

//定義ComboBox模型

Ext.define('State', {

extend: 'Ext.data.Model',

fields: [

{type: 'int', name: 'id'},

{type: 'string', name: 'cname'}

]

});

//加載省數(shù)據(jù)源

var store = Ext.create('Ext.data.Store', {

model: 'State',

proxy: {

type: 'ajax',

url: 'city.asp?act=sheng&n='+new Date().getTime()+''

autoLoad: true,

remoteSort:true

});

//加載市數(shù)據(jù)源

var store1 = Ext.create('Ext.data.Store', {

model: 'State',

proxy: {

type: 'ajax',

url: 'city.asp?act=shi&n='+new Date().getTime()+''

autoLoad: false,

remoteSort:true

});

//加載區(qū)數(shù)據(jù)源

var store2 = Ext.create('Ext.data.Store', {

model: 'State',

proxy: {

type: 'ajax',

url: 'city.asp?act=qu&n='+new Date().getTime()+''

autoLoad: false,

remoteSort:true

});

Ext.create("Ext.panel.Panel",{

renderTo: document.body,

width:290,

height:220,

title:"城市三級(jí)聯(lián)動(dòng)",

plain: true,

margin:'30 10 0 80',

bodyStyle: "padding: 45px 15px 15px 15px;",

defaults :{

autoScroll: true,

bodyPadding: 10

items:[{

xtype:"combo",

name:'sheng',

id : 'sheng',

fieldLabel:'選擇省',

displayField:'cname',

valueField:'id',

store:store,

triggerAction:'all',

queryMode: 'local',

selectOnFocus:true,

forceSelection: true,

allowBlank:false,

editable: true,

emptyText:'請(qǐng)選擇省',

blankText : '請(qǐng)選擇省',

listeners:{

select:function(combo, record,index){

try{

//userAdd = record.data.name;

var parent=Ext.getCmp('shi');

var parent1 = Ext.getCmp("qu");

parent.clearValue();

parent1.clearValue();

parent.store.load({params:{param:this.value}});

}

catch(ex){

Ext.MessageBox.alert("錯(cuò)誤","數(shù)據(jù)加載失敗。");

}

{

xtype:"combo",

name:'shi',

id : 'shi',

fieldLabel:'選擇市',

displayField:'cname',

valueField:'id',

store:store1,

triggerAction:'all',

queryMode: 'local',

selectOnFocus:true,

forceSelection: true,

allowBlank:false,

editable: true,

emptyText:'請(qǐng)選擇市',

blankText : '請(qǐng)選擇市',

listeners:{

select:function(combo, record,index){

try{

//userAdd = record.data.name;

var parent = Ext.getCmp("qu");

parent.clearValue();

parent.store.load({params:{param:this.value}});

}

catch(ex){

Ext.MessageBox.alert("錯(cuò)誤","數(shù)據(jù)加載失敗。");

}

{

xtype:"combo",

name:'qu',

id : 'qu',

fieldLabel:'選擇區(qū)',

displayField:'cname',

valueField:'id',

store:store2,

triggerAction:'all',

queryMode: 'local',

selectOnFocus:true,

forceSelection: true,

allowBlank:false,

editable: true,

emptyText:'請(qǐng)選擇區(qū)',

blankText : '請(qǐng)選擇區(qū)',

}

]

})

});

上述代碼中，如果在ComboBox直接定義store數(shù)據(jù)源，會(huì)出現(xiàn)這樣一種情況，那就是當(dāng)選擇完第一個(gè)省，點(diǎn)擊第二個(gè)市的時(shí)候，會(huì)閃一下，再點(diǎn)擊，才會(huì)出現(xiàn)市的數(shù)據(jù)。那么要解決這樣的情況，那么必須先要定義好省、市、區(qū)的數(shù)據(jù)源。那么再點(diǎn)擊的時(shí)候，就不會(huì)出現(xiàn)上述情況了。

代碼中，使用store為省的數(shù)據(jù)，設(shè)置其autoLoad為true，那么頁(yè)面第一次加載的時(shí)候，就會(huì)自動(dòng)加載省的數(shù)據(jù)，然后給省和市添加了監(jiān)聽(tīng)select，作用在于當(dāng)點(diǎn)擊省的時(shí)候，要清空市和區(qū)的數(shù)據(jù)，并根據(jù)當(dāng)前選定的值去加載對(duì)應(yīng)的數(shù)據(jù)到市的數(shù)據(jù)源中。當(dāng)然store1和store2原理是一樣的。

最后，服務(wù)端要根據(jù)傳的值進(jìn)行數(shù)據(jù)檢索及返回正確數(shù)據(jù)，這里沒(méi)有從數(shù)據(jù)庫(kù)中查詢數(shù)據(jù)，而只是簡(jiǎn)單的寫(xiě)了一些測(cè)試代碼，相信extjs代碼沒(méi)有任何的問(wèn)題了，那么服務(wù)端返回?cái)?shù)據(jù)，就不是一件很重要的事情了。

City.asp：

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

Response.ContentType = "text/html"

Response.Charset = "UTF-8"

Dim act:act = Request("act")

Dim param : param = Request("param")

If act = "sheng" Then

Response.Write("[")

Response.Write("{""cname"":""北京市"",""id"":""110000""},")

Response.Write("{""cname"":""內(nèi)蒙古自治區(qū)"",""id"":""150000""}")

Response.Write("]")

End If