EXT 二级联动下拉列表

最新推荐文章于 2018-03-08 20:40:49 发布

超级无敌咕咕鸡

最新推荐文章于 2018-03-08 20:40:49 发布

阅读量4.7k

点赞数

分类专栏： Javascript 文章标签： ext function stylesheet dropdown firefox html

本文链接：https://blog.csdn.net/loveunh1982/article/details/2602146

版权

Javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在此感谢tianxiaode对我的帮助

page.html代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <title>省份与城市联动的例子</title>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">

  <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css">

  

  <script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>

  <script type="text/javascript" src="../../../ext-all.js"></script>

  <script type="text/javascript" src="../../../ext-lang-zh_CN.js"></script>

  <script type="text/javascript" src="city.js"></script>

  <script>

Ext.onReady(function(){



	重载Grid的排序 applySort

	Ext.data.Store.prototype.applySort = function(){ //重载 applySort

		if(this.sortInfo && !this.remoteSort){

			var s = this.sortInfo, f = s.field;

			var st = this.fields.get(f).sortType;

			var fn = function(r1, r2){

			  var v1 = st(r1.data[f]), v2 = st(r2.data[f]);

				// 添加:修复汉字排序异常的Bug

			   if(typeof(v1) == "string"){ //若为字符串，

				 return v1.localeCompare(v2);//则用 localeCompare 比较汉字字符串, Firefox 与 IE 均支持

			   }

			  return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);

			};

			this.data.sort(s.direction, fn);

			if(this.snapshot && this.snapshot != this.data){

				this.snapshot.sort(s.direction, fn);

			}

		}

	};



	

	var provinceComBo=new Ext.form.ComboBox({

		hiddenName:'province',

		name: 'province_name',

		valueField:"province",

		displayField:"province",

		mode:'local',

		fieldLabel: '所在省份',

		blankText:'请选择省份',

		emptyText:'请选择省份',

		editable:false,

		anchor:'90%',

		forceSelection:true,

		triggerAction:'all',

		store:new Ext.data.SimpleStore(

			{

				fields: ["province","city"],

				data:citys,

				sortInfo:{field:'province'}

			}

		),

		listeners:{

			select:function(combo, record, index){

			/*select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )

			Fires when a list item is selected

			Listeners will be called with the following arguments:

			

				* combo : Ext.form.ComboBox

				  This combo box

				* record : Ext.data.Record

				  The data record returned from the underlying store

				* index : Number

				  The index of the selected item in the dropdown list

			

			*/

				cityCombo.clearValue();

				cityCombo.store.loadData(record.data.city);

			}

		},

        applyTo: 'provinceComBo'

	})



	var cityCombo=new Ext.form.ComboBox({

		hiddenName:'city',

		name:'city_name',

		valueField:"city",

		displayField:"city",

		mode:'local',

		fieldLabel: '所在城市',

		blankText:'请选择城市',

		emptyText:'请选择城市', 

		editable:false,

		anchor:'90%',

		forceSelection:true,

		triggerAction:'all',

		store:new Ext.data.SimpleStore({fields: ["city"],data:[],sortInfo:{field:'city'}}),

        applyTo: 'cityCombo'

	});

	

})



  </script>

</head>

<body>

<input type="text" id="provinceComBo" size="20"/><input type="text" id="cityCombo" size="20"/>

</body>

</html>

city.js的代码

var citys=[

['北京',[['北京'],['通县'],['昌平'],['大兴'],['密云'],['延庆'],['顺义'],['怀柔'],['平谷'],['石景山'],['朝阳'],['西城'],['东城'],['丰台'],['宣武'],['崇文'],['海淀']]],

['上海',[['上海县'],['嘉定'],['松江'],['南汇'],['奉贤'],['川沙'],['青浦'],['崇明'],['金山']]],

['天津',[['蓟县'],['宝坻'],['武清'],['静海'],['宁河']]]]

超级无敌咕咕鸡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
EXT 二级联动下拉列表

在此感谢tianxiaode对我的帮助page.html代码如下省份与城市联动的例子 Ext.onReady(function(){ ////重载Grid的排序 applySort Ext.data.Store.prototype.appl
复制链接

扫一扫