52,797
社区成员
发帖
与我相关
我的任务
分享发一个ext combo三级(省市区)源码，望指点
预览效果
页面
效果还可以，唯独有一个BUG，就是如果先点击了市的combo再点省，就会无数据,请高手指点
页面
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>会员注册</title>
<link href="style/extjs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../libs/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../libs/ext-3.2.1/ext-all.js"></script>
<script type="text/javascript"
src="../libs/ext-3.2.1/source/locale/ext-lang-zh_CN.js"></script>
<!-- <script type="text/javascript" src="script/extjs-area-combobox.js"></script> -->
<script type="text/javascript" src="script/area-extjs-auto-complate.js">
</script>
<style type="text/css">
#slideIn ,#cityIn ,#areaIn{width:212px;margin:12px 18px;}
</style>
</head>
<body>
<div id="slideIn">
</div>
<div id="cityIn">
</div>
<div id="areaIn">
</div>
<div id="slideInBtn">
</div>
</body>
Ext.BLANK_IMAGE_URL = "/libs/ext-3.2.1/resources/images/default/s.gif";
Ext.onReady(function() {
var provinceStore = new Ext.data.JsonStore( {
id : 'province',
remoteSort : false,
start : 0,
limit : 34,
totalProperty : "totalProperty",// 总记录数
root : "items",// 所有的数据（json对象数组）要节点
fields : [ "id", "provinceID", "name" ],
proxy : new Ext.data.HttpProxy({
url : 'areaComplate.action'
})
});
provinceStore.load();
var cityStore = new Ext.data.JsonStore( {
root : 'items',
id : 'city',
remoteSort : false,
fields : [ "id", "name", "cityID", "fatherID" ],
proxy : new Ext.data.HttpProxy( {
url : 'getCity.action'
})
});
var areaStore = new Ext.data.JsonStore( {
root : 'items',
id : 'area',
remoteSort : false,
fields : [ "id", "name", "areaID", "fatherID" ],
proxy : new Ext.data.HttpProxy( {
url : 'getAred.action'
})
});
var provinceCombo = new Ext.form.ComboBox( {
renderTo : "slideIn",
xtype : "combo",
fieldLabel : " 省",
store : provinceStore,
pageSize : 34,// 页面大小
width : 280,
listWidth : 280,
name : "province",
hiddenName : 'province',
valueField : "id",
displayField : "name",
triggerAction : 'all',
mode : 'remote'
});
provinceCombo.on('select', function(combo, record, number) {
cityCombo.clearValue();
areaCombo.clearValue();
areaStore.removeAll();
cityStore.baseParams = {
fatherID : record.get("name")
};
alert(record.get("name"));
cityStore.load();
});
provinceCombo.on('Blur', function() {
if (provinceCombo.getRawValue() == '') {
provinceCombo.clearValue();
cityCombo.clearValue();
areaCombo.clearValue();
cityStore.removeAll();
areaStore.removeAll();
}
});
var cityCombo = new Ext.form.ComboBox( {
renderTo : "cityIn",
xtype : "combo",
fieldLabel : " 市",
name : "city",
width : 280,
listWidth : 280,
hiddenName : 'city',
store : cityStore,
valueField : "id",
displayField : "name",
triggerAction : 'all',
mode : 'remote'
});
cityCombo.on('select', function(combo, record, number) {
areaCombo.clearValue();
areaStore.baseParams = {
fatherID : record.get("name")
};
areaStore.load();
});
cityCombo.on('Blur', function(combo) {
if (cityCombo.getRawValue() == '') {
cityCombo.clearValue();
areaCombo.clearValue();
areaStore.removeAll();
}
});
var areaCombo = new Ext.form.ComboBox( {
renderTo : "areaIn",
xtype : "combo",
fieldLabel : " 区",
name : "area",
width : 212,
hiddenName : 'area',
store : areaStore,
valueField : "id",
displayField : "name",
triggerAction : 'all',
mode : 'remote'
});
var btn = new Ext.Button( {
text : '取值',
renderTo : Ext.getBody(),
handler : function() {//
if (!provinceCombo.getValue()) {
Ext.Msg.alert("提示", "请选择省");
return;
}
Ext.Msg.alert("值", "省ID值:" + provinceCombo.getValue()
+ " ；\n 显示省值: " + provinceCombo.getRawValue()
+ " ；\n 市ID值: " + cityCombo.getValue() + " ；\n 显示市值: "
+ cityCombo.getRawValue() + " ；\n 区ID值: "
+ areaCombo.getValue() + " ；\n 显示值: "
+ areaCombo.getRawValue());
}
});
})
效果还可以，唯独有一个BUG，就是如果先点击了市的combo再点省，就会无数据,请高手指点
...全文
请发表友善的回复…
发表回复
碧海情天-赵亮 2010-07-01
- 打赏
- 举报
给省市初始化数据的时候，直接设上默认值就行了。没必要加那个“请选择”的项目，虽然到处都这样做，其实想想，真没太大的意义，人家想填真实的，自然就选择真实的，不想填真实的，也是随便选一个。况且对于生存在我们可爱伟大首都北京的数量巨大的上网人群来说，这的确是个麻烦。
hoojo 2010-06-30
- 打赏
- 举报
这东西就是根据第一个条件查询第二个。然后根据第二个和第一个查询第三个。思想都这样。至于实现方面略有不同。
zoujp_xyz 2010-06-30
- 打赏
- 举报
http://topic.csdn.net/u/20100622/14/0d74a4bb-dc7e-4feb-a4b4-38bed3627c28.html
zoujp_xyz 2010-06-30
- 打赏
- 举报
{
layout: "form",
items: {
xtype: "combo",
fieldLabel: "所在省",
width: 130,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: ""
}),
reader: new Ext.data.JsonReader({
id: "Key",
root: "data"
},
[{
name: "Key"
},
{
name: "Value"
}]),
baseParams: {
action: "GetProvinces"
},
autoLoad: true
}),
mode: "local",
valueField: "Key",
triggerAction: "all",
readOnly: true,
displayField: "Value",
hiddenName: "ProvinceId",
name: "ProvinceId",
listeners: {
select: function(combo, record, index) {
win.dealStoreWin.get(0).form.findField("CityId").clearValue();
win.dealStoreWin.get(0).form.findField("CityId").getStore().load({
params: {
args: record.id
}
});
}
}
},
columnWidth: .5
}]
},
{
layout: "column",
items: [{
layout: "form",
items: {
xtype: "combo",
fieldLabel: "所在市",
width: 130,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: ""
}),
reader: new Ext.data.JsonReader({
id: "Key",
root: "data"
},
[{
name: "Key"
},
{
name: "Value"
}]),
baseParams: {
action: "GetCitiesByProvince"
}
}),
mode: "local",
valueField: "Key",
triggerAction: "all",
readOnly: true,
displayField: "Value",
hiddenName: "CityId",
name: "CityId",
listeners: {
select: function(combo, record, index) {
win.dealStoreWin.get(0).form.findField("CountyId").clearValue();
win.dealStoreWin.get(0).form.findField("CountyId").getStore().load({
params: {
args: record.id
}
});
}
}
},
columnWidth: .5
},
{
layout: "form",
items: {
xtype: "combo",
fieldLabel: "所在区",
width: 130,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: ""
}),
reader: new Ext.data.JsonReader({
id: "Key",
root: "data"
},
[{
name: "Key"
},
{
name: "Value"
}]),
baseParams: {
action: "GetCountyByCity"
}
}),
mode: "local",
valueField: "Key",
triggerAction: "all",
readOnly: true,
displayField: "Value",
hiddenName: "CountyId",
name: "CountyId"
},
columnWidth: .5
}]
}
hoojo 2010-06-30
- 打赏
- 举报
[Quote=引用楼主 flash8627 的回复:]
预览效果
页面
HTML code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>会员注册</title>
<link href="style/extjs.css" rel="stylesheet"……
唯独有一个BUG，就是如果先点击了市的combo再点省，就会无数据,请高手指点
[/Quote]
预览效果
页面
HTML code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>会员注册</title>
<link href="style/extjs.css" rel="stylesheet"……
唯独有一个BUG，就是如果先点击了市的combo再点省，就会无数据,请高手指点
[/Quote]
初始化数据的时候，只给省数据。其他下拉都没有数据。然后更加省的选择数据去查第二级下拉数据
依次类推
