Extjs4.0 ComboBox如何实现三级联动

Extjs4.0 ComboBox如何实现三级联动，明确的一点是在extjs4.0中要使用load来获取数据，到底如何实现，具体步骤如下:

alert(Ext.get('city').dom.value);获取的是 displayField 的值

alert(Ext.getCmp("city").getValue());valueField

alert(Ext.getCmp("city").getRawValue());获取的是displayField的值

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

代码部分

先看HTML代码：

?

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

简单的很，就是加载了基本的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 : '请选择区' ,      }    ]   }) });

上述代码中，如果在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 %>