Extjs4.0 ComboBox如何实现三级联动,明确的一点是在extjs4.0中要使用load来获取数据,到底如何实现,具体步骤如下:
alert(Ext.getCmp("city").getValue());valueField
alert(Ext.getCmp("city").getRawValue());获取的是displayField的值
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
%>
|