ExtJS-----ComboBox(完整事例演示)||有一bug

最新推荐文章于 2018-11-13 09:28:48 发布

喝咖啡的乌龟

最新推荐文章于 2018-11-13 09:28:48 发布

阅读量3.3k

点赞数

分类专栏： Extjs javascript html 文章标签： autoload function stylesheet div html border

本文链接：https://blog.csdn.net/wangzhiyuande/article/details/7865655

版权

javascript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

Extjs

7 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

html：

<html>
  <head>
    <title>Combobox三级联动的实例</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=gbk">
  	<link rel="stylesheet" type="text/css" href="ext-all.css">
	  <script type="text/javascript" src="bootstrap.js"></script>
	  <script type="text/javascript" src="ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="jimmy.js"></script>
    <style>
    	.center{
    		width:800px;
    		height:400px;
    		border:3px solid#FF1493;
    		margin:10px auto;
    		}
    </style>
  </head>
  <body>
  	<div class="center">
    <br /><br /><br />
        <h3>我爱我家乡---安徽安庆</h3>
        <br />
        <p>
        安庆市：<br/>
        位于长江中下游北岸， 皖鄂赣三省交界处，东与安徽省池州市、铜陵市隔江相望，南以长江与江西省九江市相连，西界湖北省黄梅、蕲春、英山三县，<br/>
        北接安徽省六安市、巢湖市。<br/>
        安庆市辖区面积1.54万平方公里，现辖一市七县三区，即桐城市，怀宁、枞阳、潜山、太湖、宿松、望江、岳西七个县和迎江、大观、宜秀区三个区，<br/>
        总人口610万人，其中市区７２．７万人。	<br/>
        </p>
        <br /><br /><br />
         <div style="text-align:center;">
            <div id="comboProvince"></div>
            <div id="comboCity"></div>
            <div id="comboCounty"></div>
            <div id="comboTown"></div>
        </div>
    </div>
  </body>
</html>

js：

Ext.require(['Ext.form.*', 'Ext.data.*']);
/**
*分三步走：【1，提供数据】
*					 【2，导入到store】
*					 【3，把store托付给comboBox的store】
*/
Ext.onReady(function(){
    var dataCityHebei = [
        ['唐山','唐山'],
        ['秦皇岛','秦皇岛'],
        ['承德','承德'],
        ['张家口','张家口']
    ];
    var dataCityNeimenggu = [
        ['安庆市','安庆市'],
        ['合肥市','合肥市'],
        ['淮北市','淮北市'],
        ['淮南市','淮南市'],
        ['亳州市','亳州市'],
        ['宿州市','宿州市'],
        ['蚌埠市','蚌埠市'],
        ['滁州市','滁州市'],
        ['六安市','六安市'],
        ['铜陵市','铜陵市'],
        ['芜湖市','芜湖市'],
        ['宣城市','宣城市'],
        ['马鞍山市','马鞍山市'],
        ['池州市','池州市'],
        ['黄山市','黄山市'],
        ['芜湖市','芜湖市']
    ];
    // 其中：遵化、迁安为县级市。
    var dataCountyTangshan = [
        ['桐城市','桐城市'],
        ['望江县','望江县'],
        ['枞阳县','枞阳县'],
        ['宿松县','宿松县'],
        ['太湖县','太湖县'],
        ['岳西县','岳西县'],
        ['潜山县','潜山县'],
        ['怀宁县','怀宁县']
    ];
    var dataTownNeimenggu = [
    		['长岭镇','长岭镇'],
    		['sssss','sssss']
    ];
    var dataCountyUnknow = [
        ['可添加','可添加']
    ];
         
                          
         // 省数据源
           var storeProvince = Ext.create('Ext.data.Store', {
                   fields: ['value', 'text'],
                     data:[
                         {value:'河北',text:'河北'},
                         {value:'安徽省',text:'安徽省'},
                     ],
                     autoLoad : true
                });
                
           // 市数据源
            var storeCity = Ext.create('Ext.data.Store', {
                fields: ['value', 'text'],
             data:[],
             autoLoad : true
           });
           
          // 县数据源
           var storeCounty = Ext.create('Ext.data.Store', {
                fields: ['value', 'text'],
             data:[],
             autoLoad : true
           });
           
           //镇级数据
           var storeTown = Ext.create('Ext.data.Store', {
                fields: ['value', 'text'],
             data:[],
             autoLoad : true
           });
           
     var comboProvince =Ext.create('Ext.form.ComboBox', {
            emptyText:"请选择",     
            store : storeProvince,
            queryMode : 'local',
            triggerAction: 'all',
            valueField: 'value',   //value值字段
            displayField: 'text',  //显示文本字段
            renderTo: 'comboProvince',
            listeners: { // 监听选择事件
                select: function() {
                    storeCity.removeAll();
                     if (this.getValue() == '河北') {
                         storeCity.loadData(dataCityHebei,true);
                        } else if (this.getValue() == '安徽省') {
                        storeCity.loadData(dataCityNeimenggu,true);
                    }else if(this.getValue() == 'ssss') {
                        storeCity.loadData(dataCityNeimenggu,true);
                    }
                   }
            }
         });
      var comboCity =Ext.create('Ext.form.ComboBox', {
            emptyText:"请选择",
            store : storeCity,
            mode: 'local',
            triggerAction: 'all',
            valueField: 'value',
            displayField: 'text',
            renderTo: 'comboCity',
            listeners: { 
                select: function() {
                     if (this.getValue() == '安庆市') {
                         storeCounty.loadData(dataCountyTangshan);
                    } else {
                        storeCounty.loadData(dataCountyUnknow);
                        }
                   }
            }
         });
         
          var comboCounty =Ext.create('Ext.form.ComboBox', {
            emptyText:"请选择",
            store : storeCounty,
            mode: 'local',
            triggerAction: 'all',
            valueField: 'value',
            displayField: 'text',
            renderTo: 'comboCounty',
            listeners: { 
                select: function() {
                     if (this.getValue() == '望江县') {
                         storeCounty.loadData(dataCountyTangshan);
                    } else {
                        storeTown.loadData(dataTownNeimenggu,true);
                        }
                   }
            }
         });
         
         var comboTown =Ext.create('Ext.form.ComboBox', {
            emptyText:"请选择",
            store : storeTown,
            mode: 'local',
            triggerAction: 'all',
            valueField: 'value',
            displayField: 'text',
            renderTo: 'comboTown',
            listeners: { 
                select: function() {
                    alert(comboProvince.getValue() + '-' + comboCity.getValue() + '-' + comboCounty.getValue() + '-' + comboTown.getValue());
                   }
            }
         });
      });

有一bug：如安徽省，河北，，我想点出安庆市，，那么我得先点击河北，再点击河北的下一联动，不会出现任何内容，这时候再点击上一级点击安徽省，再点击下一级才会出现选项，，，，想再点击下一级，在市级选项里面重复一样的操作(不需要点击省级哦！)

--------555,有高手能够解决这个bug的请指教，谢谢。