前期时间，需求说后台管理系统（前端用extjs开发)的省市区三级联动选择太麻烦，能不能做成类似于日期选择控件，直接给用户去选择。当时比较忙，说先凑合着用，最近稍微闲一下，就研究了一下。
对extjs不是很熟，在网上看到了一篇文章，写得不错，，
结合Extjs自带的DatePicker源代码，写了一个ProvinceCityAreaPicker,
/** * */Ext.define('Ext.ux.ProvinceCityAreaPicker', { extend : 'Ext.panel.Panel', requires : [ 'Ext.XTemplate', , 'Ext.EventObject', 'Ext.fx.Manager' ], alias : 'widget.provincecityareapicker', tpl : [ ' ',// province // div ' ',// table ' ', // tbody ' ',// ' ',// ' ',// ' ',// ' ',// '', ' ',// ' ',// '{#:this.isRowEnd}',// ' ',// ' {provinceName:this.ellipseText}',// '',// '',// '',// '',// tbody '',// table '', ' ',// city ' ',// table ' ', // tbody ' ',// ' ',// ' ',// ' ',// ' ',// '', ' ',// ' ',// '{#:this.isRowEnd}',// ' ',// ' {cityName:this.ellipseText}',// '',// '',// '',// '',// tbody '',// table '', ' ',// areas ' ',// table ' ', // tbody ' ',// ' ',// ' ',// ' ',// ' ',// '', ' ',// ' ',// '{#:this.isRowEnd}',// ' ',// ' {areaName:this.ellipseText}',// '',// '',// '',// '',// tbody '',// table '', { isRowEnd : function(index) { index--; var end = index !== 0 && index % 4 === 0; return end ? ' ' : ''; }, 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; } }}); 代码写的比较粗糙，不过对于后台管理系统来说已经够用了。
最后上几张图：
