在 ExtJs 中实现上拉列表(combo)联动 _JavaScript

在 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: 'local',
        store: towStore,
        displayField: 'xxdmkeepType',
        valueField: 'xxdmid',

    }]

});

///////////以上是表单

------------------以上是代码区