Extjs中利用combobox实现全国省市级联

来源：互联网发布：淘宝联盟怎么没有佣金编辑：程序博客网时间：2024/05/17 04:42

{
                                       xtype : "combobox",
                                       fieldLabel : "选择省份",
                                       name : "provincename",
                                       id :"provincename",
                                       labelAlign : "left",
                                       emptyText:"请选择省份",
                                       typeAhead:true,
                                       queryMode:"local",
                                       allowBlank : false,
                                       forceSelection : true,
                                       store:Ext.create("Ext.data.ArrayStore",
                                               {
                                                   fields:["key","value"],
                                                   data:[["bj","北京"],["tj","天津"],["sh","上海"],["cq","重庆"],["hb","河北"],["hen","河南"],["yn","云南"],["ln","辽宁"],["hlj","黑龙江"],["hun","湖南"],["ah","安徽"],["sd","山东"],["xj","新疆"],["js","江苏"],["zj","浙江"],["jx","江西"],["hub","湖北"],["gx","广西"],["gs","甘肃"],["sx","山西"],["nmg","内蒙"],["shanx","陕西"],["jl","吉林"],["fj","福建"],["gz","贵州"],["gd","广东"],["qh","青海"],["xz","西藏"],["sc","四川"],["nx","宁夏"],["hn","海南"],["tw","台湾"],]
                                               }),
                                       valueField:"key",
                                       displayField:"value",
                                       listeners:{
                                           'change':function(t,n,o,e){
                                               alert(temp==null);
                                               temp = n;
                                               //Ext.getCmp("cityname").setDisabled(false);
                                               //alert(n);
                                               //alert(r.pop().get("key"));
//                                               if(temp==null){temp=n;}else{temp=n;}
                                               Ext.getCmp("cityname").reset();
                                               store1.load({
                                                   callback: function(records, options, success){
                                                      Ext.Msg.alert('info', '加载完毕');
                                                   },
                                                   scope: store, //Scope用来指定回调函数执行时的作用域
                                                   //Add为true时，load()得到的数据会添加在原来的store数据的末尾，
                                                   //否则会先清除之前的数据，再将得到的数据添加到store中
                                   　　               add: false
                                               });
                                           }
//                                           ,
//                                           'change':function(t,n,o,e){
//                                               alert('change');
//                                           }
                                       }
                                   },
                                   {
                                       xtype:"combobox",
                                       fieldLabel:"选择城市",
                                       name:"cityname",
                                       id:"cityname",
                                       queryMode:"local",
                                       //disabled:true,
                                       triggerAction:"all",
                                       store:store1,
                                       multiSelect:true,
                                       labelAlign:"left",
                                       emptyText:"请选择城市",
                                       typeAhead:true,
                                       valueField:"key",
                                       displayField:"key",
                                       forceSelection:true,
                                       defaultListConfig:{
                                             loadMask: false
                                        }

}

store1 = Ext.create("Ext.data.Store",{
               fields:[{name:"key"}],
               //remoteSort:true,
               autoLoad:true,
               proxy : new Ext.data.HttpProxy({
                   url:"getAllCityName.action",
                   actionMethods:{
                       read:"get"
                   },
                   reader :　{
                       type:"json",
                       root : "Rows"
                   }
               })
           });
           store1.on("beforeload",function(c,d){
               alert("before");
               var b = {
                       "name" : temp
               };
               Ext.apply(c.proxy.extraParams, b)
           });