在 ExtJs 中实现下拉列表(combo)联动
功能是：两个下拉列表 当第一个下拉列表的值变化时 第二个下拉列表的值随第一个下拉列表的值变化而变化 第一个下拉列表显示中国各个省份第二个显示每个省份的城市



    思路很简单：给两个下拉列表各定义一个数据源 捕获第一个下拉列表的选择事件 并加载第二个下拉列表的数据源



     以下的代码和注释 都是根据我自己的理解写的 有些不是很标准的地方希望前辈多指教 另外 我对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