[ExtJS]设置级联菜单的默认值-阿里云开发者社区

前言

　　 ExtJS在修改这样的页面上赋值是很方便的，在正文中1.2.1代码中可以看出，一行代码就可以搞定，但这是对于普通控件而言，如文本框。对于ComboBox可没这么简单...

版本

　　Ext JS Library 3.0.0

正文

　　一、问题

　　　　1.1　　截图

　　　　1.2　　代码

　　　　　　1.2.1　　前端代码

　　　　　　1.2.2　　后台代码

    static IList<Combox> Provinces = new List<Combox>();
    static IDictionary<int, Combox> Citys = new Dictionary<int, Combox>();

    static combox()
    {
        Provinces.Add(new Combox() { Id = 1, Name = "湖南省" });
        Provinces.Add(new Combox() { Id = 2, Name = "广东省" });

        Citys.Add(1, new Combox()
        {
            Id = 1,
            Name = "长沙市"
        });

        Citys.Add(2, new Combox()
        {
            Id = 1,
            Name = "岳阳市"
        });

        Citys.Add(3, new Combox()
        {
            Id = 2,
            Name = "深圳市"
        });

        Citys.Add(4, new Combox()
        {
            Id = 2,
            Name = "珠海市"
        });
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    /// <summary>
    /// 获取所有省份数据
    /// </summary>
    /// <returns></returns>
    public void GetProvinces()
    {
        Response.Write(new StringBuilder().Append("{count:")
            .Append(Provinces.Count)
            .Append(",result:")
            .Append(JavaScriptConvert.SerializeObject(Provinces))
            .Append('}')
            .ToString());
    }

    /// <summary>
    /// 获取省下面的市区数据
    /// </summary>
    /// <returns></returns>
    public void GetCitys()
    {
        IList<Combox> result = new List<Combox>();
        int Province = Convert.ToInt32(Request.QueryString["Province"]);
        foreach (KeyValuePair<int, Combox> data in Citys)
        {
            if (data.Value.Id == Province)
                result.Add(new Combox() { Id = data.Key, Name = data.Value.Name });

        }
        Response.Write(new StringBuilder().Append("{count:")
            .Append(result.Count)
            .Append(",result:")
            .Append(JavaScriptConvert.SerializeObject(result))
            .Append('}')
            .ToString());
    }

    public override string Detail()
    {
        IDictionary<string, int> result = new Dictionary<string, int>();
        result.Add("combo1", 2);
        result.Add("combo2", 2);
        return JavaScriptConvert.SerializeObject(result);
    }

    class Combox
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

　　　　1.3　　代码说明

　　　　　　1.3.1　　后台代码中使用的数据仅用测试用

　　　　　　1.3.2　　意图：加载的时候就默认选择广东省——珠海市

　　二、问题分析

　　　　ComboBox延迟加载导致。

　　三、解决办法

　　　　2.1　　让ComboBox赋值后显示对应的Name，而不是Id

　　　　　　在Ext.Ajax.request执行前加一句“store1.load();”即可。

　　　　2.2　　ComboBox级联赋值

　　　　　　级联赋值可没这么简单了，需要手动触发事件，这里尝试了很长时间才出结果。

　　　　　　2.2.1　　第一步，手动触发一级菜单选择事件

            store1.load();

            //加载数据
            Ext.Ajax.request({
                url: 'combox.aspx?method=Detail',
                method: 'GET',
                callback: function (options, success, response) {
                    if(success && response.status == 200){
                        //将值批量赋值
                        form1.form.setValues(Ext.util.JSON.decode(response.responseText))

                        var comboValue1 = combo1.getValue();
                        var selectRecord;
                        store1.each(function(record){
                            if(record.data.Id == comboValue1)
                                selectRecord = record;
                        });
                        combo1.fireEvent('select',combo1,selectRecord);
                    }
                }
            });

　　　　　　　　这里发现手动触发得自己传入record的参数，不然里面去不到值。

　　　　　　2.2.2　　修改级联

                            store2.load({
                                callback :function(r,options,success){
                                    if(success){
                                        if(IsLoad)
                                        {
                                            combo2.setValue(comboValue2);
                                            IsLoad = false;
                                        }
                                    }
                                }
                            });

　　　　　　　　代码说明:

　　　　　　　　　　a).　　IsLoad是全局变量，用来控制仅设置一次默认值

　　　　　　　　　　b).　　很容易又会犯触发菜单一就直接给菜单二赋值的错，注意这里因为菜单二还没有加载完，所有如果直接在触发事件后面写赋值，出来仍然是数字。

　　　　　　2.2.3　　最终效果图