功能是:两个下拉列表 当第一个下拉列表的值变化时 第二个下拉列表的值随第一个下拉列表的值变化而变化 第一个下拉列表显示中国各个省份第二个显示每个省份的城市
思路很简单:给两个下拉列表各定义一个数据源 捕获第一个下拉列表的选择事件 并加载第二个下拉列表的数据源
以下的代码和注释 都是根据我自己的理解写的 有些不是很标准的地方希望前辈多指教 另外 我对ExtJs不是很熟悉 考虑到的问题不多也希望前辈多包含哈..
------------------代码区
/////////////数据源
//第一个下拉列表
var oneProxy = new Ext.data.HttpProxy({
url : "/XxbmdSQuery.do?StoreFlag=14"//查找所有省份
});
//第二个下拉列表
var towProxy = new Ext.data.HttpProxy({
url : "/XxbmdSQuery.do" //后面不带参数也可以 到后面加载的时候再赋参数
});
////////////以上是数据源
//////////// Json
//这个Json 表示表里的所有字段
var jsonReader = new Ext.data.JsonReader(
{totalProperty : 'totalProperty',root : 'root'},
[ {name : 'xxdmid'},
{name : 'xxdmkeepType'}
]);
////////////以上是 Json
///////////数据转换
//这个数据转换就是将查找出来的数据 转换为Json格式
//第一个下拉列表
var oneStore = new Ext.data.Store({
proxy : oneProxy,
reader : jsonReader
});
//第二个下拉列表
var towStore = new Ext.data.Store({
proxy : towProxy,
reader : jsonReader
});
///////////以上是数据转换
///////////表单
var myForm = new Ext.form.FormPanel({
id : 'myForm',
url : path + "/qykhDSQuery.do", //这是表单提交的地方
items:[{
name : 'sheng',
xtype: 'combo',
autoLoad : true,
editable:false, //是否可以手动输入
triggerAction : 'all',
fieldLabel: '省份',
emptyText:'请选择省份', //默认值
mode: 'local', //本地数据源
store: oneStore, //以上定义过的第一个数据源
displayField: 'xxdmkeepType',
valueField: 'xxdmid',
listeners : { //监听该下拉列表的选择事件
select : function(combo, record, index) {
//设置城市的下拉列表的值为空
myForm.getForm().findField('shi').setValue("");
//加载第二个数据源并传参数
towStore.load({params : { StoreFlag : combo.value }});
}
}
},{
name : 'shi',
xtype: 'combo',
autoLoad : true,
editable:false,
triggerAction : 'all',
fieldLabel: '城市',
emptyText:'请选择城市',
mode: 'local',
store: towStore,
displayField: 'xxdmkeepType',
valueField: 'xxdmid',
}]
});
///////////以上是表单
------------------以上是代码区