집 > 기사 > 웹 프론트엔드 > Extjs4.0 ComboBox가 3단계 linkage_extjs를 구현하는 방법

Extjs4.0 ComboBox가 3단계 linkage_extjs를 구현하는 방법

WBOY원래의: 2016-05-16 15:00:451218검색

많은 네티즌들이 Extjs4.0 ComboBox를 구현하는 방법을 묻고 있습니다. 다행히 이전에는 3.x를 사용하여 3단계 연결을 구현했지만 이제는 Extjs4.0을 사용하여 동일한 연결 효과를 얻습니다. 한 가지 주목할 점은 3.x에서는 model:'local'이 Extjs4.0에서는 queryMode: 'local'로 표현되고, 3.x에서는 데이터를 로딩할 때 reload를 사용하는데 extjs4.0에서는 사용해야 한다는 점이다. 데이터를 얻으려면 로드하세요. 아래와 같이:

코드 부분

먼저 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 파일을 로드하고 사용자 정의된 콤보박스.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&#63;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&#63;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&#63;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에 매장 데이터 소스를 직접 정의하면 첫 번째 주를 선택하고 두 번째 도시를 클릭하면 잠시 깜박인 후 다시 클릭하는 상황이 발생하게 됩니다. . 도시 데이터가 나타납니다. 이러한 상황을 해결하기 위해서는 먼저 시도, 시, 군의 데이터 소스를 정의해야 합니다. 그런 다음 다시 클릭하면 위의 상황이 발생하지 않습니다.

코드에서 매장을 해당 지역의 데이터로 사용하고 autoLoad를 true로 설정합니다. 그러면 페이지가 처음 로드될 때 해당 지역의 데이터가 자동으로 로드되고 모니터링 선택이 추가됩니다. 결과적으로 페이지를 클릭하면 지방을 선택할 때 도시 및 구역 데이터가 지워지고 해당 데이터가 현재 선택된 값을 기반으로 도시 데이터 소스에 로드되어야 합니다. 물론 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
%>

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명：

이전 기사：CKEditor 검증 실패에 대한 해결 방법(js 검증 + jQuery 검증 검증)_jquery다음 기사：CKEditor 검증 실패에 대한 해결 방법(js 검증 + jQuery 검증 검증)_jquery

Extjs4.0 ComboBox가 3단계 linkage_extjs를 구현하는 방법

관련 기사