Extjs-Combobox三级联动

                                                                                                  

很多网友在问，Extjs4.0 ComboBox如何实现，好在之前用3.x实现过一个三级联动，如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是，3.x中的model:'local'在Extjs4.0中用queryMode: 'local'来表示，而且在3.x中Load数据时用reload，但是在extjs4.0中要使用load来获取数据。如下图：

代码部分

先看HTML代码：

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" content="text/html; charset=utf-8" />
MHZG.NET-城市三级联动实例
"stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
"text/javascript" src="../../bootstrap.js">
"text/javascript" src="../../locale/ext-lang-zh_CN.js">
"text/javascript" src="combobox.js">

简单的很，就是加载了基本的CSS文件和JS文件，并且加载自定义的combobox.js文件。

combobox.js：

Ext.require('Ext.*');
Ext.onReady(function(){
  //定义ComboBox模型
  Ext.define('State', {
      extend: 'Ext.data.Model',
      fields: [
          {type: 'int', name: 'id'},
          {type: 'string', name: 'cname'}
      ]
  });

 //加载省数据源
  var store = Ext.create('Ext.data.Store', {
      model: 'State',
      proxy: {
          type: 'ajax',
          url: 'city.asp?act=sheng&n='+new Date().getTime()+''
      },
      autoLoad: true,
      remoteSort:true
  });
  //加载市数据源
  var store1 = Ext.create('Ext.data.Store', {
      model: 'State',
      proxy: {
          type: 'ajax',
          url: 'city.asp?act=shi&n='+new Date().getTime()+''
      },
      autoLoad: false,
      remoteSort:true
  });
  //加载区数据源
  var store2 = Ext.create('Ext.data.Store', {
      model: 'State',
      proxy: {
          type: 'ajax',
          url: 'city.asp?act=qu&n='+new Date().getTime()+''
      },
      autoLoad: false,
      remoteSort:true
  });



  Ext.create("Ext.panel.Panel",{
    renderTo: document.body,
    width:290,
    height:220,
    title:"城市三级联动",
    plain: true,
    margin:'30 10 0 80',
    bodyStyle: "padding: 45px 15px 15px 15px;",
    defaults :{
        autoScroll: true,
        bodyPadding: 10
    },
    items:[{
        xtype:"combo",
        name:'sheng',
        id : 'sheng',
        fieldLabel:'选择省',
        displayField:'cname',
        valueField:'id',
        store:store,
        triggerAction:'all',
        queryMode: 'local',
        selectOnFocus:true,
        forceSelection: true,
        allowBlank:false,
        editable: true,
        emptyText:'请选择省',
        blankText : '请选择省',
        listeners:{
            select:function(combo, record,index){
                 try{
                     //userAdd = record.data.name;
                     var parent=Ext.getCmp('shi');
                     var parent1 = Ext.getCmp("qu");
                     parent.clearValue();
                     parent1.clearValue();
                     parent.store.load({params:{param:this.value}});
                 }
                 catch(ex){
                     Ext.MessageBox.alert("错误","数据加载失败。");
                 }
            }
        }
        },
        {
        xtype:"combo",
        name:'shi',
        id : 'shi',
        fieldLabel:'选择市',
        displayField:'cname',
        valueField:'id',
        store:store1,
        triggerAction:'all',
        queryMode: 'local',
        selectOnFocus:true,
        forceSelection: true,
        allowBlank:false,
        editable: true,
        emptyText:'请选择市',
        blankText : '请选择市',
        listeners:{
            select:function(combo, record,index){
                 try{
                     //userAdd = record.data.name;
                     var parent = Ext.getCmp("qu");
                     parent.clearValue();
                     parent.store.load({params:{param:this.value}});
                 }
                 catch(ex){
                     Ext.MessageBox.alert("错误","数据加载失败。");
                 }
            }
        }
        },
        {
        xtype:"combo",
        name:'qu',
        id : 'qu',
        fieldLabel:'选择区',
        displayField:'cname',
        valueField:'id',
        store:store2,
        triggerAction:'all',
        queryMode: 'local',
        selectOnFocus:true,
        forceSelection: true,
        allowBlank:false,
        editable: true,
        emptyText:'请选择区',
        blankText : '请选择区',
        }
    ]
  })
});

Ext.require('Ext.*');
Ext.onReady(function(){
  //定义ComboBox模型
  Ext.define('State', {
	  extend: 'Ext.data.Model',
	  fields: [
		  {type: 'int', name: 'id'},
		  {type: 'string', name: 'cname'}
	  ]
  });
 
 //加载省数据源
  var store = Ext.create('Ext.data.Store', {
	  model: 'State',
	  proxy: {
		  type: 'ajax',
		  url: 'city.asp?act=sheng&n='+new Date().getTime()+''
	  },
	  autoLoad: true,
	  remoteSort:true
  });
  //加载市数据源
  var store1 = Ext.create('Ext.data.Store', {
	  model: 'State',
	  proxy: {
		  type: 'ajax',
		  url: 'city.asp?act=shi&n='+new Date().getTime()+''
	  },
	  autoLoad: false,
	  remoteSort:true
  });
  //加载区数据源
  var store2 = Ext.create('Ext.data.Store', {
	  model: 'State',
	  proxy: {
		  type: 'ajax',
		  url: 'city.asp?act=qu&n='+new Date().getTime()+''
	  },
	  autoLoad: false,
	  remoteSort:true
  });
	
  
  
  Ext.create("Ext.panel.Panel",{
	renderTo: document.body,
	width:290,
	height:220,
	title:"城市三级联动",
	plain: true,
	margin:'30 10 0 80',
	bodyStyle: "padding: 45px 15px 15px 15px;",
	defaults :{
		autoScroll: true,
		bodyPadding: 10
	},
	items:[{
		xtype:"combo",
		name:'sheng',
		id : 'sheng',
		fieldLabel:'选择省',
		displayField:'cname',
		valueField:'id',
		store:store,
		triggerAction:'all',
		queryMode: 'local', 
		selectOnFocus:true,
		forceSelection: true,
		allowBlank:false,
		editable: true,
		emptyText:'请选择省',
		blankText : '请选择省',
		listeners:{   
			select:function(combo, record,index){
				 try{
					 //userAdd = record.data.name;
					 var parent=Ext.getCmp('shi');
					 var parent1 = Ext.getCmp("qu");
					 parent.clearValue();
					 parent1.clearValue();
					 parent.store.load({params:{param:this.value}});
				 }
				 catch(ex){
					 Ext.MessageBox.alert("错误","数据加载失败。");
				 }
			}
		}
		},
		{
		xtype:"combo",
		name:'shi',
		id : 'shi',
		fieldLabel:'选择市',
		displayField:'cname',
		valueField:'id',
		store:store1,
		triggerAction:'all',
		queryMode: 'local',
		selectOnFocus:true,
		forceSelection: true,
		allowBlank:false,
		editable: true,
		emptyText:'请选择市',
		blankText : '请选择市',
		listeners:{   
			select:function(combo, record,index){
				 try{
					 //userAdd = record.data.name;
					 var parent = Ext.getCmp("qu");
					 parent.clearValue();
					 parent.store.load({params:{param:this.value}});
				 }
				 catch(ex){
					 Ext.MessageBox.alert("错误","数据加载失败。");
				 }
			}
		}
		},
		{
		xtype:"combo",
		name:'qu',
		id : 'qu',
		fieldLabel:'选择区',
		displayField:'cname',
		valueField:'id',
		store:store2,
		triggerAction:'all',
		queryMode: 'local',
		selectOnFocus:true,
		forceSelection: true,
		allowBlank:false,
		editable: true,
		emptyText:'请选择区',
		blankText : '请选择区',
		}
	]
  })
});

上述代码中，如果在ComboBox直接定义store数据源，会出现这样一种情况，那就是当选择完第一个省，点击第二个市的时候，会闪一下，再点击，才会出现市的数据。那么要解决这样的情况，那么必须先要定义好省、市、区的数据源。那么再点击的时候，就不会出现上述情况了。

代码中，使用store为省的数据，设置其autoLoad为true，那么页面第一次加载的时候，就会自动加载省的数据，然后给省和市添加了监听select，作用在于当点击省的时候，要清空市和区的数据，并根据当前选定的值去加载对应的数据到市的数据源中。当然store1和store2原理是一样的。

最后，服务端要根据传的值进行数据检索及返回正确数据，这里没有从数据库中查询数据，而只是简单的写了一些测试代码，相信extjs代码没有任何的问题了，那么服务端返回数据，就不是一件很重要的事情了。

City.asp：

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
    Response.ContentType = "text/html"
    Response.Charset = "UTF-8"
%>
<%
    Dim act:act = Request("act")
    Dim param : param = Request("param")
    If act = "sheng" Then
        Response.Write("[")
        Response.Write("{""cname"":""北京市"",""id"":""110000""},")
        Response.Write("{""cname"":""内蒙古自治区"",""id"":""150000""}")
        Response.Write("]")
    End If
    If act = "shi" Then
        If param = "110000" Then
            Response.Write("[")
            Response.Write("{""cname"":""市辖区"",""id"":""110100""},")
            Response.Write("{""cname"":""市辖县"",""id"":""110200""}")
            Response.Write("]")
        ElseIf param = "150000" Then
            Response.Write("[")
            Response.Write("{""cname"":""呼和浩特市"",""id"":""150100""},")
            Response.Write("{""cname"":""包头市"",""id"":""150200""}")
            Response.Write("]")
        End If
    End If
    If act = "qu" Then
        If param = "110100" Then
            Response.Write("[")
            Response.Write("{""cname"":""朝阳区"",""id"":""110101""},")
            Response.Write("{""cname"":""昌平区"",""id"":""110102""}")
            Response.Write("]")
        ElseIf param = "110200" Then
            Response.Write("[")
            Response.Write("{""cname"":""密云县"",""id"":""110201""},")
            Response.Write("{""cname"":""房山县"",""id"":""110202""}")
            Response.Write("]")
        ElseIf param = "150100" Then
            Response.Write("[")
            Response.Write("{""cname"":""回民区"",""id"":""150101""},")
            Response.Write("{""cname"":""新城区"",""id"":""150102""}")
            Response.Write("]")
        ElseIf param = "150200" Then
            Response.Write("[")
            Response.Write("{""cname"":""青山区"",""id"":""150201""},")
            Response.Write("{""cname"":""东河区"",""id"":""150202""}")
            Response.Write("]")
        End If
    End If
%>

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
	Response.ContentType = "text/html"
	Response.Charset = "UTF-8"
%>
<%
	Dim act:act = Request("act")
	Dim param : param = Request("param")
	If act = "sheng" Then
		Response.Write("[")
		Response.Write("{""cname"":""北京市"",""id"":""110000""},")
		Response.Write("{""cname"":""内蒙古自治区"",""id"":""150000""}")
		Response.Write("]")
	End If
	If act = "shi" Then
		If param = "110000" Then
			Response.Write("[")
			Response.Write("{""cname"":""市辖区"",""id"":""110100""},")
			Response.Write("{""cname"":""市辖县"",""id"":""110200""}")
			Response.Write("]")
		ElseIf param = "150000" Then
			Response.Write("[")
			Response.Write("{""cname"":""呼和浩特市"",""id"":""150100""},")
			Response.Write("{""cname"":""包头市"",""id"":""150200""}")
			Response.Write("]")
		End If
	End If
	If act = "qu" Then
		If param = "110100" Then
			Response.Write("[")
			Response.Write("{""cname"":""朝阳区"",""id"":""110101""},")
			Response.Write("{""cname"":""昌平区"",""id"":""110102""}")
			Response.Write("]")
		ElseIf param = "110200" Then
			Response.Write("[")
			Response.Write("{""cname"":""密云县"",""id"":""110201""},")
			Response.Write("{""cname"":""房山县"",""id"":""110202""}")
			Response.Write("]")
		ElseIf param = "150100" Then
			Response.Write("[")
			Response.Write("{""cname"":""回民区"",""id"":""150101""},")
			Response.Write("{""cname"":""新城区"",""id"":""150102""}")
			Response.Write("]")
		ElseIf param = "150200" Then
			Response.Write("[")
			Response.Write("{""cname"":""青山区"",""id"":""150201""},")
			Response.Write("{""cname"":""东河区"",""id"":""150202""}")
			Response.Write("]")
		End If
	End If
%>

如果大家有更好的实现方法，请留言指正或加我的QQ群一起分享。QQ群号码：112445964