网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 Extjs4.0 ComboBox如何实现三级联动
内容
    很多网友在问，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
    %>
    以上就是本文的全部内容，希望对大家的学习有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/13 19:45:01