Ext 热门城市选择器
/**
* #########################################
* ####### 热门城市选择器 开始 #######
* 取值时请用 selectedValue selectedText
* value rawValue :
* 还不清楚是哪里导致始终为展示的汉字...
* #########################################
*/
Ext.define('yifan.commonSelector.hotCitySelector',{
extend : 'Ext.form.field.Picker',
alias: 'widget.hotCitySelector',
triggerCls:Ext.baseCSSPrefix + 'form-search-trigger',
createPicker : function(){
var me = this;
var picker = Ext.create('Ext.tab.Panel', {
frame : true,
items: [ //这里的内容 需要参照 getProvinceStore() 一样来写 getHotCityStore() 方法来填充。
{
id:me.name+'_hotCitySelector_tab_hotCity',
title: '热门城市',
items:[
{
xtype:'button',
text:'成都',
handler:function(){
alert('成都');
}
},
{
xtype:'button',
text:'重庆',
handler:function(){
alert('重庆');
}
}
],
layout:{
type:'table',
columns:'6'
}
},
{
id:me.name+'_hotCitySelector_tab_province',
title: '省份',
layout:{
type:'table',
columns:'6'
}
},
{
id:me.name+'_hotCitySelector_tab_city',
title: '城市',
layout:{
type:'table',
columns:'6'
}
},
{
id:me.name+'_hotCitySelector_tab_area',
title: '区县',
layout:{
type:'table',
columns:'6'
}
}
],
floating: true,
hidden: true,
width : 420,
height: 250,
columnLines : true,
focusOnToFront: false
});
me.setTabTitleWidth(picker);
me.picker = picker;
me.getProvinceStore();
return picker;
},
triggers:{
clear : {
cls : 'x-form-clear-trigger',
handler : function(){
this.setRawValue(null);
this.setValue(null);
this.selectedValue = null;
this.selectedText = null;
this.getTrigger('clear').hide();
},
hidden : true
}
},
setTabTitleWidth:function(picker){
//设置页签的宽度
for(var n=0;n<picker.items.items.length;n++){
var curTab = picker.items.items[n];
if(n == 0){
curTab.tab.setWidth(100);
} else {
curTab.tab.setWidth(85);
}
}
},
selectedValue:null,//选择的数据项的值
selectedText:null,//选择的数据项的文本描述
matchFieldWidth:false,
getHotCityStore:function(){//用于获取 热门城市
},
displayCountOfRow:6,//第一行展示的个数
showSubDistrictInfo:function(tabId,record){//当点击一个选项后 判断是否设置 还是继续展示下级区域信息
var me = this,districtCode = record.districtCode;
if(tabId == me.name+'_hotCitySelector_tab_hotCity'){ //热门城市
me.setValue(districtCode);
me.setRawValue(record.districtShortName);
me.selectedValue = districtCode;
me.selectedText = record.districtShortName;
me.collapse();
me.getTrigger('clear').show();
} else if(tabId == me.name+'_hotCitySelector_tab_province'){ //省份
me.getCityStore(districtCode);
} else if(tabId == me.name+'_hotCitySelector_tab_city'){ //城市
me.getAreaStore(districtCode);
} else if(tabId == me.name+'_hotCitySelector_tab_area'){ //区县
me.setValue(districtCode);
me.setRawValue(record.districtShortName);
me.selectedValue = districtCode;
me.selectedText = record.districtShortName;
me.collapse();
me.getTrigger('clear').show();
}
},
getDistrictInfo:function(params,tabId,urlMethod){
var me = this;
var successFun = function (json) {
var districtObjList = json.districtVo.districtList;
var btnArr = [];
if(!Ext.isEmpty(districtObjList)){
Ext.each(districtObjList,function(record,index,records){
var districtCode = record.districtCode;
var districtShortName = record.districtShortName;
var districtName = record.districtName;
var curBtn = Ext.create('Ext.button.Button',{
text:districtShortName,
tooltip:districtName,
style:'width:60px;cursor:pointer;margin:5px;border:1px solid black;background-color:#bbb;',
listeners:{
'click':function(btnSelf,event,eOpts){
me.showSubDistrictInfo(tabId,record);
}
}
});
btnArr.push(curBtn);
},this);
}
var picker = me.picker,curTab = null;
if(tabId == me.name+'_hotCitySelector_tab_hotCity'){
//把省份备份
var provinceTab = picker.child('#'+me.name+'_hotCitySelector_tab_province');
var cityTab = picker.child('#'+me.name+'_hotCitySelector_tab_city');
var areaTab = picker.child('#'+me.name+'_hotCitySelector_tab_area');
//当前为 热门城市
curTab = picker.child('#'+tabId);
picker.removeAll();
//添加页签
picker.add({
id:tabId,
title:'热门城市',
layout:{
type:'table',
columns:'6'
},
items:btnArr,
width:me.picker.width
});
picker.add(provinceTab);
picker.add(cityTab);
picker.add(areaTab);
me.setTabTitleWidth(picker);
}else if(tabId == me.name+'_hotCitySelector_tab_province'){
var cityTab = picker.child('#'+me.name+'_hotCitySelector_tab_city');
var areaTab = picker.child('#'+me.name+'_hotCitySelector_tab_area');
curTab = picker.child('#'+tabId);
picker.remove(curTab);
picker.remove(cityTab);
picker.remove(areaTab);
picker.add({
id:tabId,
title:'省份',
layout:{
type:'table',
columns:'6'
},
items:btnArr,
width:me.picker.width
});
picker.add({
id:me.name+'_hotCitySelector_tab_city',
title:'城市',
layout:{
type:'table',
columns:'6'
},
items:[],
width:me.picker.width
});
picker.add({
id:me.name+'_hotCitySelector_tab_area',
title:'区县',
layout:{
type:'table',
columns:'6'
},
items:[],
width:me.picker.width
});
me.setTabTitleWidth(picker);
} else if(tabId == me.name+'_hotCitySelector_tab_city'){
var areaTab = picker.child('#'+me.name+'_hotCitySelector_tab_area');
curTab = picker.child('#'+tabId);
picker.remove(curTab);
picker.remove(areaTab);
picker.add({
id:tabId,
title:'城市',
layout:{
type:'table',
columns:'6'
},
items:btnArr,
width:me.picker.width
});
picker.add({
id:me.name+'_hotCitySelector_tab_area',
title:'区县',
layout:{
type:'table',
columns:'6'
},
items:[],
width:me.picker.width
});
me.setTabTitleWidth(picker);
} else if(tabId == me.name+'_hotCitySelector_tab_area'){
curTab = picker.child('#'+tabId);
picker.remove(curTab);
picker.add({
id:tabId,
title:'区县',
layout:{
type:'table',
columns:'6'
},
items:btnArr,
width:me.picker.width
});
me.setTabTitleWidth(picker);
}
//再获取当前点击后的页签
curTab = picker.child('#'+tabId);
//展示该页签
curTab.tab.show();
//选中该页签
picker.setActiveTab(curTab);
};
var failureFun = function (json) {
console.log(json);
};
miser.requestJsonAjax('../base/districtAction!'+urlMethod+'.action', params, successFun, failureFun,true);
},
getProvinceStore:function(){//用于获取 省份
var me = this;
var params = {
'districtVo' :{
'district' : {
'districtType' : 'PROVINCE'
}
},
'limit':100000,
'start':0
};
me.getDistrictInfo(params,me.name+'_hotCitySelector_tab_province','queryProvince');
},
getCityStore:function(provinceCode){//用于获取 城市
var me = this;
var params = {
'districtVo' :{
'district' : {
'parentDistrictCode' : provinceCode
}
},
'limit':100000,
'start':0
};
me.getDistrictInfo(params,me.name+'_hotCitySelector_tab_city','queryCity');
},
getAreaStore:function(cityCode){//用于获取 区县
var me = this;
var params = {
'districtVo' :{
'district' : {
'parentDistrictCode' : cityCode
}
},
'limit':100000,
'start':0
};
me.getDistrictInfo(params,me.name+'_hotCitySelector_tab_area','queryArea');
}
});
---恢复内容结束---
Ext.define('Miser.commonSelector.hotCitySelector',{
extend : 'Ext.form.field.Picker',
alias: 'widget.hotCitySelector',
triggerCls:Ext.baseCSSPrefix + 'form-search-trigger',
createPicker : function(){
var me = this;
var picker = Ext.create('Ext.tab.Panel', {
frame : true,
items: [
{
id:me.name+'_hotCitySelector_tab_hotCity',
title: '热门城市',
items:[
{
xtype:'button',
text:'成都',
handler:function(){
alert('成都');
}
},
{
xtype:'button',
text:'重庆',
handler:function(){
alert('重庆');
}
}
],
layout:{
type:'table',
columns:'6'
}
},
{
id:me.name+'_hotCitySelector_tab_province',
title: '省份',
layout:{
type:'table',
columns:'6'
}
},
{
id:me.name+'_hotCitySelector_tab_city',
title: '城市',
layout:{
type:'table',
columns:'6'
}
},
{
id:me.name+'_hotCitySelector_tab_area',
title: '区县',
layout:{
type:'table',
columns:'6'
}
}
],
floating: true,
hidden: true,
width : 420,
height: 250,
columnLines : true,
focusOnToFront: false
});
me.setTabTitleWidth(picker);
me.picker = picker;
me.getProvinceStore();
return picker;
},
triggers:{
clear : {
cls : 'x-form-clear-trigger',
handler : function(){
this.setRawValue(null);
this.setValue(null);
this.selectedValue = null;
this.selectedText = null;
this.getTrigger('clear').hide();
},
hidden : true
}
},
setTabTitleWidth:function(picker){
//设置页签的宽度
for(var n=0;n<picker.items.items.length;n++){
var curTab = picker.items.items[n];
if(n == 0){
curTab.tab.setWidth(100);
} else {
curTab.tab.setWidth(85);
}
}
},
selectedValue:null,//选择的数据项的值
selectedText:null,//选择的数据项的文本描述
matchFieldWidth:false,
getHotCityStore:function(){//用于获取 热门城市
},
displayCountOfRow:6,//第一行展示的个数
showSubDistrictInfo:function(tabId,record){//当点击一个选项后 判断是否设置 还是继续展示下级区域信息
var me = this,districtCode = record.districtCode;
if(tabId == me.name+'_hotCitySelector_tab_hotCity'){ //热门城市
me.setValue(districtCode);
me.setRawValue(record.districtShortName);
me.selectedValue = districtCode;
me.selectedText = record.districtShortName;
me.collapse();
me.getTrigger('clear').show();
} else if(tabId == me.name+'_hotCitySelector_tab_province'){ //省份
me.getCityStore(districtCode);
} else if(tabId == me.name+'_hotCitySelector_tab_city'){ //城市
me.getAreaStore(districtCode);
} else if(tabId == me.name+'_hotCitySelector_tab_area'){ //区县
me.setValue(districtCode);
me.setRawValue(record.districtShortName);
me.selectedValue = districtCode;
me.selectedText = record.districtShortName;
me.collapse();
me.getTrigger('clear').show();
}
},
getDistrictInfo:function(params,tabId,urlMethod){
var me = this;
var successFun = function (json) {
var districtObjList = json.districtVo.districtList;
var btnArr = [];
if(!Ext.isEmpty(districtObjList)){
Ext.each(districtObjList,function(record,index,records){
var districtCode = record.districtCode;
var districtShortName = record.districtShortName;
var districtName = record.districtName;
var curBtn = Ext.create('Ext.button.Button',{
text:districtShortName,
tooltip:districtName,
style:'width:60px;cursor:pointer;margin:5px;border:1px solid black;background-color:#bbb;',
listeners:{
'click':function(btnSelf,event,eOpts){
me.showSubDistrictInfo(tabId,record);
}
}
});
btnArr.push(curBtn);
},this);
}
var picker = me.picker,curTab = null;
if(tabId == me.name+'_hotCitySelector_tab_hotCity'){
//把省份备份
var provinceTab = picker.child('#'+me.name+'_hotCitySelector_tab_province');
var cityTab = picker.child('#'+me.name+'_hotCitySelector_tab_city');
var areaTab = picker.child('#'+me.name+'_hotCitySelector_tab_area');
//当前为 热门城市
curTab = picker.child('#'+tabId);
picker.removeAll();
//添加页签
picker.add({
id:tabId,
title:'热门城市',
layout:{
type:'table',
columns:'6'
},
items:btnArr,
width:me.picker.width
});
picker.add(provinceTab);
picker.add(cityTab);
picker.add(areaTab);
me.setTabTitleWidth(picker);
}else if(tabId == me.name+'_hotCitySelector_tab_province'){
var cityTab = picker.child('#'+me.name+'_hotCitySelector_tab_city');
var areaTab = picker.child('#'+me.name+'_hotCitySelector_tab_area');
curTab = picker.child('#'+tabId);
picker.remove(curTab);
picker.remove(cityTab);
picker.remove(areaTab);
picker.add({
id:tabId,
title:'省份',
layout:{
type:'table',
columns:'6'
},
items:btnArr,
width:me.picker.width
});
picker.add({
id:me.name+'_hotCitySelector_tab_city',
title:'城市',
layout:{
type:'table',
columns:'6'
},
items:[],
width:me.picker.width
});
picker.add({
id:me.name+'_hotCitySelector_tab_area',
title:'区县',
layout:{
type:'table',
columns:'6'
},
items:[],
width:me.picker.width
});
me.setTabTitleWidth(picker);
} else if(tabId == me.name+'_hotCitySelector_tab_city'){
var areaTab = picker.child('#'+me.name+'_hotCitySelector_tab_area');
curTab = picker.child('#'+tabId);
picker.remove(curTab);
picker.remove(areaTab);
picker.add({
id:tabId,
title:'城市',
layout:{
type:'table',
columns:'6'
},
items:btnArr,
width:me.picker.width
});
picker.add({
id:me.name+'_hotCitySelector_tab_area',
title:'区县',
layout:{
type:'table',
columns:'6'
},
items:[],
width:me.picker.width
});
me.setTabTitleWidth(picker);
} else if(tabId == me.name+'_hotCitySelector_tab_area'){
curTab = picker.child('#'+tabId);
picker.remove(curTab);
picker.add({
id:tabId,
title:'区县',
layout:{
type:'table',
columns:'6'
},
items:btnArr,
width:me.picker.width
});
me.setTabTitleWidth(picker);
}
//再获取当前点击后的页签
curTab = picker.child('#'+tabId);
//展示该页签
curTab.tab.show();
//选中该页签
picker.setActiveTab(curTab);
};
var failureFun = function (json) {
console.log(json);
};
miser.requestJsonAjax('../base/districtAction!'+urlMethod+'.action', params, successFun, failureFun,true);
},
getProvinceStore:function(){//用于获取 省份
var me = this;
var params = {
'districtVo' :{
'district' : {
'districtType' : 'PROVINCE'
}
},
'limit':100000,
'start':0
};
me.getDistrictInfo(params,me.name+'_hotCitySelector_tab_province','queryProvince');
},
getCityStore:function(provinceCode){//用于获取 城市
var me = this;
var params = {
'districtVo' :{
'district' : {
'parentDistrictCode' : provinceCode
}
},
'limit':100000,
'start':0
};
me.getDistrictInfo(params,me.name+'_hotCitySelector_tab_city','queryCity');
},
getAreaStore:function(cityCode){//用于获取 区县
var me = this;
var params = {
'districtVo' :{
'district' : {
'parentDistrictCode' : cityCode
}
},
'limit':100000,
'start':0
};
me.getDistrictInfo(params,me.name+'_hotCitySelector_tab_area','queryArea');
}
});
浙公网安备 33010602011771号