extjs4 省市区选择器

最新推荐文章于 2019-07-29 20:11:47 发布
最新推荐文章于 2019-07-29 20:11:47 发布
阅读量384 收藏
点赞数
文章标签： python 前端 ux ViewUI
原文链接：https://my.oschina.net/u/183476/blog/306883
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

    前期时间，需求说后台管理系统（前端用extjs开发)的省市区三级联动选择太麻烦，能不能做成类似于日期选择控件，直接给用户去选择。当时比较忙，说先凑合着用，最近稍微闲一下，就研究了一下。

    对extjs不是很熟，在网上看到了一篇文章，写得不错，http://skirtlesden.com/articles/html-and-extjs-components，

结合Extjs自带的DatePicker源代码，写了一个ProvinceCityAreaPicker,

/**
 * 
 */
Ext.define('Ext.ux.ProvinceCityAreaPicker', {
	extend : 'Ext.panel.Panel',
	requires : [ 'Ext.XTemplate', , 'Ext.EventObject', 'Ext.fx.Manager' ],
	alias : 'widget.provincecityareapicker',

	tpl : [ '<div id="_provincecityareapicker-province", role="presentation" {provinceHide:this.hidePCA}>',// province
	// div
	'<table class="x-datepicker-inner" cellspacing="0" role="presentation">',// table
	'<tbody role="presentation">', // tbody
	'<tr role="row">',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'</tr>', '<tr role="row">',//
	'<tpl for="provinceList">',//
	'{#:this.isRowEnd}',//
	'<td role="gridcell" title="{provinceName}-{provinceCode}" data-code="{provinceCode}" class="x-datepicker-active x-datepicker-cell">',//
	'<a role="presentation" hidefocus="on" class="x-datepicker-date" href="#">{provinceName:this.ellipseText}',//
	'</td>',//
	'</tpl>',//
	'</tr>',//
	'</tbody>',// tbody
	'</table>',// table
	'</div>', '<div id="_provincecityareapicker-city", role="presentation" {cityHide:this.hidePCA}>',// city
	'<table class="x-datepicker-inner" cellspacing="0" role="presentation">',// table
	'<tbody role="presentation">', // tbody
	'<tr role="row">',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'</tr>', '<tr role="row">',//
	'<tpl for="cityList">',//
	'{#:this.isRowEnd}',//
	'<td role="gridcell" title="{cityName}-{cityCode}" data-code="{cityCode}" class="x-datepicker-active x-datepicker-cell">',//
	'<a role="presentation" hidefocus="on" class="x-datepicker-date" href="#">{cityName:this.ellipseText}',//
	'</td>',//
	'</tpl>',//
	'</tr>',//
	'</tbody>',// tbody
	'</table>',// table
	'</div>', '<div id="_provincecityareapicker-area", role="presentation" {areaHide:this.hidePCA}>',// areas
	'<table class="x-datepicker-inner" cellspacing="0" role="presentation">',// table
	'<tbody role="presentation">', // tbody
	'<tr role="row">',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'<td role="gridcell" title="" class="x-datepicker-active x-datepicker-cell"></td>',//
	'</tr>', '<tr role="row">',//
	'<tpl for="areaList">',//
	'{#:this.isRowEnd}',//
	'<td role="gridcell" title="{areaName}-{areaCode}" data-code="{areaCode}" class="x-datepicker-active x-datepicker-cell">',//
	'<a role="presentation" hidefocus="on" class="x-datepicker-date" href="#">{areaName:this.ellipseText}',//
	'</td>',//
	'</tpl>',//
	'</tr>',//
	'</tbody>',// tbody
	'</table>',// table
	'</div>', {
		isRowEnd : function(index) {
			index--;
			var end = index !== 0 && index % 4 === 0;
			return end ? '</tr><tr role="row">' : '';
		},
		ellipseText : function(text) {
			// out.push(values);
			return Ext.String.ellipsis(text, 6, true);
		},
		hidePCA : function(hide) {
			return hide ? 'class="x-hidden"' : '';
		}
	} ],

	titleAlign : 'center',
	frame : false,
	border : true,
	bodyStyle : {
		padding : '10px'
	},
	width : 400,

	initComponent : function() {
		var me = this;

		me.callParent();

		me.selectedCls = 'x-datepicker-selected';

		me.addEvents('select');
	},

	beforeRender : function() {
		var me = this;

		me.callParent();

		me.sendProvinceData();

		Ext.applyIf(me, {
			data : {}
		});

		me.current = {
			provinceList : me.provinceList,
			cityList : me.cityList,
			areaList : me.areaList,
			provinceHide : false,
			cityHide : true,
			areaHide : true
		}

		Ext.apply(me.data, me.current);

		me.protoEl.unselectable();
	},

	onRender : function(container, position) {
		var me = this;
		console.log(me.header);
		me.callParent(arguments);

		me.initProvinceCellEl();
	},

	initProvinceCellEl : function() {
		var me = this;
		me.provCt = me.el.select('#_provincecityareapicker-province');
		me.provTdCells = me.provCt.select('table tbody tr:visible(true) td');
		me.provCells = me.provTdCells.select('a');
	},

	initCityCellEl : function() {
		var me = this;
		me.cityCt = me.el.select('#_provincecityareapicker-city');
		me.cityTdCells = me.cityCt.select('table tbody tr:visible(true) td');
		me.cityCells = me.cityTdCells.select('a');
	},

	initAreaCellEl : function() {
		var me = this;
		me.areaCt = me.el.select('#_provincecityareapicker-area');
		me.areaTdCells = me.areaCt.select('table tbody tr:visible(true) td');
		me.areaCells = me.areaTdCells.select('a');
	},

	initEvents : function() {
		var me = this;
		me.callParent();
		me.provCells.on('click', me.provClickHandler, me);
	},

	sendProvinceData : function() {
		var me = this;
		if (Ext.isEmpty(me.provinceList)) {
			Ext.Ajax.request({
				method : 'POST',
				url : me.contextPath + '/main/findProvince.action',
				async : false,
				success : function(response, eOpts) {
					var data = Ext.decode(response.responseText);
					if (data && data.queryList) {
						me.provinceList = data.queryList;
					}
				},
				failure : function(response, eOpts) {
					me.provinceList = null;
				}
			});
		}
	},

	sendCityData : function(provinceCode, cache) {
		var me = this;

		var mustRequest = true;
		if (cache && Ext.isEmpty(me.cityList)) {
			mustRequest = false;
		}

		if (mustRequest) {
			Ext.Ajax.request({
				method : 'POST',
				url : me.contextPath + '/main/findCity.action',
				async : false,
				params : {
					code : provinceCode
				},
				success : function(response, eOpts) {
					var data = Ext.decode(response.responseText);
					if (data && data.queryList) {
						me.cityList = data.queryList
					}
				},
				failure : function(response, eOpts) {
					me.cityList = null;
				}
			});
		}
	},

	sendAreaData : function(cityCode, cache) {
		var me = this;

		var mustRequest = true;
		if (cache && Ext.isEmpty(me.areaList)) {
			mustRequest = false;
		}

		if (mustRequest) {
			Ext.Ajax.request({
				method : 'POST',
				url : me.contextPath + '/main/findArea.action',
				async : false,
				params : {
					code : cityCode
				},
				success : function(response, eOpts) {
					var data = Ext.decode(response.responseText);
					if (data && data.queryList) {
						me.areaList = data.queryList
					}
				},
				failure : function(response, eOpts) {
					me.areaList = null;
				}
			});
		}
	},

	updateProvince : function() {
		var me = this;
		Ext.apply(me.current, {
			provinceHide : false,
			cityHide : true,
			areaHide : true
		});
		me.update(me.current);
		me.setTitle('省份选择');
		me.initProvinceCellEl();
		me.provCells.on('click', me.provClickHandler, me);
	},

	updateCity : function() {
		var me = this;
		Ext.apply(me.current, {
			provinceHide : true,
			cityHide : false,
			areaHide : true,
			cityList : me.cityList
		});
		me.update(me.current);
		me.setTitle('城市选择');
		me.initCityCellEl();
		me.cityCells.on('click', me.cityClickHandler, me);
	},

	updateArea : function() {
		var me = this;
		Ext.apply(me.current, {
			provinceHide : true,
			cityHide : true,
			areaHide : false,
			areaList : me.areaList
		});
		me.update(me.current);
		me.setTitle('区域选择');
		me.initAreaCellEl();
		me.areaCells.on('click', me.areaClickHandler, me);
	},

	provClickHandler : function(evt, prov, opts) {
		evt.stopEvent();
		evt.stopPropagation();
		var me = this;
		var href = Ext.fly(prov);
		if (href && href.getAttribute('href')) {
			me.el.select('#_provincecityareapicker-province table tbody tr:visible(true) td').removeCls(me.selectedCls);
			var tdEle = href.parent();
			var provinceCode = tdEle.getAttribute('data-code');
			me.updateCurrentProvince(provinceCode);
			tdEle.addCls(me.selectedCls);
			me.mask();
			me.sendCityData(provinceCode, false);
			me.updateCity();
			me.unmask();
		}
	},

	updateCurrentProvince : function(provinceCode) {
		var me = this;
		if (me.current && me.current.provinceList && provinceCode) {
			Ext.each(me.provinceList, function(prov, index) {
				if (prov && prov.provinceCode == provinceCode) {
					Ext.apply(me.current, {
						province : prov
					});
					return;
				}
			});
		}
	},

	cityClickHandler : function(evt, city, opts) {
		evt.stopEvent();
		evt.stopPropagation();
		var me = this;
		var href = Ext.fly(city);
		if (href && href.getAttribute('href')) {
			me.el.select('#_provincecityareapicker-city table tbody tr:visible(true) td').removeCls(me.selectedCls);
			var tdEle = href.parent();
			var cityCode = tdEle.getAttribute('data-code');
			me.updateCurrentCity(cityCode);
			tdEle.addCls(me.selectedCls);
			me.mask();
			me.sendAreaData(cityCode, false);
			me.updateArea();
			me.unmask();
		}
	},

	updateCurrentCity : function(cityCode) {
		var me = this;
		if (me.current && me.current.cityList && cityCode) {
			Ext.each(me.cityList, function(city, index) {
				if (city && city.cityCode == cityCode) {
					Ext.apply(me.current, {
						city : city
					});
					return;
				}
			});
		}
	},

	areaClickHandler : function(evt, area, opts) {
		evt.stopEvent();
		evt.stopPropagation();
		var me = this, handler = me.handler;
		var href = Ext.fly(area);
		if (href && href.getAttribute('href')) {
			me.el.select('#_provincecityareapicker-area table tbody tr:visible(true) td').removeCls(me.selectedCls);
			var tdEle = href.parent();
			var areaCode = tdEle.getAttribute('data-code');
			me.updateCurrentArea(areaCode);
			tdEle.addCls(me.selectedCls);
			var c = me.current;
			me.setValue({
				province : c.province,
				city : c.city,
				area : c.area
			});
			me.fireEvent('select', me, me.value);
			if (handler) {
				handler.call(me.scope || me, me.value);
			}
			me.onSelect();
		}
	},

	updateCurrentArea : function(areaCode) {
		var me = this;
		if (me.current && me.current.areaList && areaCode) {
			Ext.each(me.areaList, function(area, index) {
				if (area && area.areaCode == areaCode) {
					Ext.apply(me.current, {
						area : area
					});
					return;
				}
			});
		}
	},

	onSelect : function() {
		if (this.hideOnSelect) {
			this.hide();
		}
	},

	setValue : function(value) {
		this.value = value;
		return this;
	},

	getValue : function() {
		return this.value;
	},

	prevHandler : function() {
		var me = this;
		if (!me.current.cityHide && !Ext.isEmpty(me.current.provinceList)) {
			me.updateProvince();
		} else if (!me.current.areaHide && !Ext.isEmpty(me.current.cityList)) {
			me.updateCity();
		} else {
			return;
		}
	},

	nextHandler : function() {
		var me = this;
		if (!me.current.provinceHide && !Ext.isEmpty(me.current.cityList)) {
			me.updateCity();
		} else if (!me.current.cityHide && !Ext.isEmpty(me.current.areaList)) {
			me.updateArea();
		} else {
			return;
		}
	}
});

代码写的比较粗糙，不过对于后台管理系统来说已经够用了。

最后上几张图：

174530_id2I_183476.png

174530_3MOy_183476.png

174530_u5u1_183476.png


转载于:https://my.oschina.net/u/183476/blog/306883

weixin_33872566
关注
[ExtJS] ExtJS颜色选择器
拒绝成猿的程序员
09-03 4170
在ExtJS的mordern版本中，缺少颜色选择器 这里提供一个自己封装的 xtype:'colorfield' 选取面板：   1.颜色面板 继承的是Ext.Component 通过XTemplete渲染的颜色面板 constructor(config) { config = config || {}; config.tpl = [ '&lt;tpl for="....
【原创】基于Extjs4的城市选择器插件
02-25
简述插件各个结构的组成部分和运行机制，最上层的是继承自Extjs自身的一个picker类，piker包含了一个tabpanel，tabpanel有山个子项即省、市、县3个tab选项卡。 从外往里说，extjs所有的这种选择器都是继承自picker类，继承这个类实现一个重要的方法createPicker 方法，在这个方法里创建一个本选择器需要用到的组件，我这里创建的是tabpanel，tabpanel继承自Ext.tab.Panel这个类没什么好说的，内部就是一些选项卡的切换以及调用方法渲染内部的选项卡；最后就是最内层的选项卡界面，这个是继承自Ext.Component这个基础类，几乎所有的Extjs内部的显示组件都是继承自这个类，这个类有一个重要的配置项就是renderTpl，这个是界面的骨架。完整这个骨架之后还得处理显示的数据，我这里是在tabpanel里面处理的，通过Extjs提供的Ajax从服务端获取数据，并将数据设置为需要渲染用到的数据最终将界面展示出来。
ExtJS树型下拉框应用--地区选择
liuxi1024的专栏
07-16 225
1、效果如图   2、 引入TreeField控件(转载)   Ext.form.TreeField = Ext.extend(Ext.form.TriggerField, { /** * @cfg {Boolean} readOnly * 设置为只读状态 * */ readOnly : ...
[EXTJS]省市选择组件
oolxq的专栏
07-10 409
[code="java"]Ext.form.provSelector = Ext.extend(Ext.form.Field, { vertical : false, allowBlank : true, initComponent: function(){ this.addEvents( ); Ex...
Extjs4---combobox省市区三级联动+struts2
网站开发初中级代码参考-转载
09-18 125
只是做了个小例子，数据是写死在Action里面的 完整代码下载地址：http://download.csdn.net/detail/lc448986375/4578239 combobox.js代码： Ext.onReady( function(){ Ext.define( 'model', { extend:'Ext.data.Model', ...
extjs 省市区三级联动combobox
scoliver的专栏
04-04 1980
原文地址： http://blog.csdn.net/flash8627/article/details/6453526     测试主文件JSP：     [xhtml] view plaincopy %@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
Extjs颜色选择器选择器
01-16
在ExtJS中，颜色选择器（Color Picker）是一个常见的组件，用于让用户在多种颜色中选择一种。本实例中的"Extjs颜色选择器"提供了一个完整的实现，方便开发者直接在项目中使用。 在描述中提到的"ColorField.html"...
Extjs4 拾色器 颜色选择 ColorPicker
11-10
在ExtJS4中，颜色选择器（ColorPicker）是一个非常实用的组件，它允许用户在界面上方便地选取颜色。这个组件通常用于需要用户输入颜色值的场景，如设计工具、编辑器或者配置界面。 在"Extjs4 拾色器 颜色选择 ...
包含各种类型的extjs小图标，Extjs4小图标
03-28
在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标，这些图标用于增强应用程序的视觉效果，提供用户友好的操作指示。 1. **图标分类**： - 图标通常分为不同的类别，如操作图标（比如...
extjs+struts2省市区三级联动完整示例
02-10
应用extjs4和struts2开发的省市区三级联动完整示例,导入myeclipse即可用，无需再导入任何jar包
extj省市区连动js分装类
08-05
关于extjs的省市区代码。封装的js类，呵呵呵呵呵呵呵呵呵呵
ExtJs 省市级联选择代码
热门推荐
LinBSoft的专栏
02-17 1万+
extjs 省市级联代码,掌握了,其实省市县等多级联动是一样的 { xtype: "combo", id: 'prov', name: 'prov', fieldLabel: '省份', width: 280, store: pr
Ext省市级联下拉框
liuyuqin1991的专栏
04-03 1324
首先是前台的省市下拉框展示： 省下拉框 xtype : 'combo', id : 'province', anchor : '100%', fieldLabel : '省', labelWidth : 100, store : provinceStore, hiddenName : 'name',
extjs 省市县 读取
朝花夕拾
09-20 1427
Ext.onReady(function() { var sexValue=''; var schoolstatusValue=''; var curOpr=''; var provinceCode = ''; var cityCode = ''; var areaCode = ''; //第一次未打开任何窗口 var flag=false; var gridStore = ne
Ajax案例之三级联动
fachew的博客
07-29 549
功能需求： 页面中有三个下拉框，分别为省下拉框、市下拉框、区/县下拉框。 选择省，则市下拉框中出现对应的该省下的市信息， 选择市，则区/县下拉框中出现对应的该市下的区/县信息 技术分析： ajax技术+servlet+jsp+jdbc 需求分析（思路）： 1.创建页面：页面中有三个下拉框，分别为省/市/区、县； 2.页面加载成功发起ajax请求，请求省的信息，并将响应结果填充到省所在的下拉框； 3...
EXT 实现省份--城市--地区--级连
LL1x.com
01-31 169
在实现级连的时候，我把所有的数据一次性的存来前台， 你再去改天一个省份或一个城市的时就不用再去访问服务器了， 将低了，服务器的压力，   在本人的博客上有三个省份，城市，地区的，所有数据 本人将它解成字符串，然后比后台定义成字符串，直接发到前台来， 减少服务器的读取数据的时间，   解析后的数据如下面：         把这一些数据发到前台时就把它实例到对象就可以了。呵 ...
ExtJS（三）--Ajax实现省份城市联动
一只不懈努力的程序猿，通过代码实验洞悉技术的本质。
07-21 2625
今天学习了Ajax技术，刚刚做了一个省份-城市联动的Ajax应用示例。可能很多人都已经写过了，也是一个比较简单的例子，在这里分享出来大家共同学习交流一下。希望能给到那些像我一样的菜鸟程序员参考一点帮助吧！ 效果截图：        省份-城市联动就是当你在省份下拉列表框选择一个省份的时候，旁边的城市下拉列表框就会动态地生成该省份对应的城市列表。如：省份是广东，则城市的下拉框对应显示广州、茂
ExtJS4 GridPanel 样式与选择模式解析
"这篇文档主要介绍了ExtJS4中GridPanel的样式使用以及选择模式，适合对ExtJS感兴趣的开发者参考学习。" 在ExtJS4中，GridPanel是一个强大的组件，用于展示表格数据。以下是对GridPanel的几种样式和选择模式的详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值