二级联动（省份城市）

xianyunxiaoyao

浏览: 35327 次
性别:
来自: 广州

最近访客更多访客>>

549885855

intolong

不想睡先生

zzxuan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ext学习

Ext 二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">    
    
<html>    
    
<head>    
    
  <title>省份与城市联动的例子</title>    
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8">    
    
  <link rel="stylesheet" type="text/css" href="ext/ext-all.css">    
    
    <script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
    
  <script type="text/javascript" src="ext/ext-base.js"></script>    
    
  <script type="text/javascript" src="ext/ext-all.js"></script>    
    
  <!--<script type="text/javascript" src="citys.js" ></script>   --> 
    
  <script type="text/javascript">
    
	var citys=[     
  
['北京',[['北京'],['通县'],['昌平'],['大兴'],['密云'],['延庆'],['顺义'],['怀柔'],['平谷'],['石景山'],['朝阳'],['西城'],['东城'],['丰台'],['宣武'],['崇文'],['海淀']]],    
   
['上海',[['上海县'],['嘉定'],['松江'],['南汇'],['奉贤'],['川沙'],['青浦'],['崇明'],['金山']]],     
  
['天津',[['蓟县'],['宝坻'],['武清'],['静海'],['宁河']]]  
  
];  
    
Ext.onReady(function(){     
    
    
    
    ////重载Grid的排序 applySort     
    
    Ext.data.Store.prototype.applySort = function(){ //重载 applySort     
    
        if(this.sortInfo && !this.remoteSort){     
    
            var s = this.sortInfo, f = s.field;     
    
            var st = this.fields.get(f).sortType;     
    
            var fn = function(r1, r2){     
    
              var v1 = st(r1.data[f]), v2 = st(r2.data[f]);     
    
                // 添加:修复汉字排序异常的Bug     
    
               if(typeof(v1) == "string"){ //若为字符串，     
    
                 return v1.localeCompare(v2);//则用 localeCompare 比较汉字字符串, Firefox 与 IE 均支持     
    
               }     
    
              return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);     
    
            };     
    
            this.data.sort(s.direction, fn);     
    
            if(this.snapshot && this.snapshot != this.data){     
    
                this.snapshot.sort(s.direction, fn);     
    
            }     
    
        }     
    
    };     
    
    
    
         
    
    var provinceComBo=new Ext.form.ComboBox({     
    
        hiddenName:'province',     
    
        name: 'province_name',     
    
        valueField:"province",     
    
        displayField:"province",     
    
        mode:'local',     
    
        fieldLabel: '所在省份',     
    
        blankText:'请选择省份',     
    
        emptyText:'请选择省份',     
    
        editable:false,     
    
        anchor:'90%',     
    
        forceSelection:true,     
    
        triggerAction:'all',     
    
        store:new Ext.data.SimpleStore(     
    
            {     
    
                fields: ["province","city"],     
    
                data:citys,     
    
                sortInfo:{field:'province'}     
    
            }     
    
        ),     
    
        listeners:{     
    
            select:function(combo, record, index){     
    
            /*select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )    
   
            Fires when a list item is selected    
   
            Listeners will be called with the following arguments:    
   
                
   
                * combo : Ext.form.ComboBox    
   
                  This combo box    
   
                * record : Ext.data.Record    
   
                  The data record returned from the underlying store    
   
                * index : Number    
   
                  The index of the selected item in the dropdown list    
   
                
   
            */     
    
                cityCombo.clearValue();     
    
                cityCombo.store.loadData(record.data.city);     
    
            }     
    
        },     
    
        applyTo: 'provinceComBo'     
    
    })     
    
    
    
    var cityCombo=new Ext.form.ComboBox({     
    
        hiddenName:'city',     
    
        name:'city_name',     
    
        valueField:"city",     
    
        displayField:"city",     
    
        mode:'local',     
    
        fieldLabel: '所在城市',     
    
        blankText:'请选择城市',     
    
        emptyText:'请选择城市',      
    
        editable:false,     
    
        anchor:'90%',     
    
        forceSelection:true,     
    
        triggerAction:'all',     
    
        store:new Ext.data.SimpleStore({fields: ["city"],data:[],sortInfo:{field:'city'}}),     
    
        applyTo: 'cityCombo'     
    
    });     
    
         
    
})     
    
    
    
    
</script>    
    
</head>    
    
<body>    
    
<input type="text" id="provinceComBo" size="20"/><input type="text" id="cityCombo" size="20"/>    
    
</body>    
    
</html>

效果如下：