我要评论很多网友在问，extjs4.0 combobox如何实现，好在之前用3.x实现过一个三级联动，如今用extjs4.0来实现同样的联动效果。其中注意的一点就是，3.x中的model:'local'在extjs4.0中用querymode: 'local'来表示，而且在3.x中load数据时用reload，但是在extjs4.0中要使用load来获取数据。如下图：
代码部分
先看html代码：
<html > <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>mhzg.net-城市三级联动实例</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../bootstrap.js"></script> <script type="text/javascript" src="../../locale/ext-lang-zh_cn.js"></script> <script type="text/javascript" src="combobox.js"></script> </head> <body> </body> </html>
简单的很，就是加载了基本的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'}
]
});
//加载省数据源
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
});
//加载市数据源
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
});
//加载区数据源
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:"城市三级联动",
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:'请选择省',
blanktext : '请选择省',
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("错误","数据加载失败。");
}
}
}
},
{
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:'请选择市',
blanktext : '请选择市',
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("错误","数据加载失败。");
}
}
}
},
{
xtype:"combo",
name:'qu',
id : 'qu',
fieldlabel:'选择区',
displayfield:'cname',
valuefield:'id',
store:store2,
triggeraction:'all',
querymode: 'local',
selectonfocus:true,
forceselection: true,
allowblank:false,
editable: true,
emptytext:'请选择区',
blanktext : '请选择区',
}
]
})
});
上述代码中，如果在combobox直接定义store数据源，会出现这样一种情况，那就是当选择完第一个省，点击第二个市的时候，会闪一下，再点击，才会出现市的数据。那么要解决这样的情况，那么必须先要定义好省、市、区的数据源。那么再点击的时候，就不会出现上述情况了。
代码中，使用store为省的数据，设置其autoload为true，那么页面第一次加载的时候，就会自动加载省的数据，然后给省和市添加了监听select，作用在于当点击省的时候，要清空市和区的数据，并根据当前选定的值去加载对应的数据到市的数据源中。当然store1和store2原理是一样的。
最后，服务端要根据传的值进行数据检索及返回正确数据，这里没有从数据库中查询数据，而只是简单的写了一些测试代码，相信extjs代码没有任何的问题了，那么服务端返回数据，就不是一件很重要的事情了。
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"":""内蒙古自治区"",""id"":""150000""}")
response.write("]")
end if
if act = "shi" then
if param = "110000" then
response.write("[")
response.write("{""cname"":""市辖区"",""id"":""110100""},")
response.write("{""cname"":""市辖县"",""id"":""110200""}")
response.write("]")
elseif param = "150000" then
response.write("[")
response.write("{""cname"":""呼和浩特市"",""id"":""150100""},")
response.write("{""cname"":""包头市"",""id"":""150200""}")
response.write("]")
end if
end if
if act = "qu" then
if param = "110100" then
response.write("[")
response.write("{""cname"":""朝阳区"",""id"":""110101""},")
response.write("{""cname"":""昌平区"",""id"":""110102""}")
response.write("]")
elseif param = "110200" then
response.write("[")
response.write("{""cname"":""密云县"",""id"":""110201""},")
response.write("{""cname"":""房山县"",""id"":""110202""}")
response.write("]")
elseif param = "150100" then
response.write("[")
response.write("{""cname"":""回民区"",""id"":""150101""},")
response.write("{""cname"":""新城区"",""id"":""150102""}")
response.write("]")
elseif param = "150200" then
response.write("[")
response.write("{""cname"":""青山区"",""id"":""150201""},")
response.write("{""cname"":""东河区"",""id"":""150202""}")
response.write("]")
end if
end if
%>
以上就是本文的全部内容，希望对大家的学习有所帮助。
发表评论