EXT 省市三级联动及默认选择
var provinceStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: '/data/CommonHandlers/ComboBoxHandler.ashx?action=province',
reader: {
type: 'json',
root: 'items'
}
}
});
var cityStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: '/data/CommonHandlers/ComboBoxHandler.ashx',
reader: {
type: 'json',
root: 'items'
}
}
});
var districtStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: '/data/CommonHandlers/ComboBoxHandler.ashx',
reader: {
type: 'json',
root: 'items'
}
}
});
{
fieldLabel: '所属地区',
labelWidth: 60,
xtype: 'fieldcontainer',
combineErrors: true,
defaultType: 'textfield',
defaults: {
hideLabel: 'true'
},
layout: 'hbox',
flex: 1,
items: [{
emptyText: '请选择省份...',
flex: 3,
xtype: 'combobox',
name: 'Provinces',
id: 'Provinces',
hiddenName: 'name',
store: provinceStore,
selectOnFocus: true,
valueField: 'id',
displayField: 'name',
queryMode: 'remote',
editable: false,
listeners: {
select: function (Combox, record, index) {//联动效果
Ext.getCmp('Provinces_id').setValue(this.value);
var city = Ext.getCmp('City');
city.clearValue();
city.store.removeAll();
cityStore.load({
params: {
action: 'city', parentid: this.value
}
});
}
}
}, {
emptyText: '请选择城市...',
flex: 3,
editable: false,
selectOnFocus: true,
xtype: 'combobox',
id: 'City',
name: 'City',
margins: '0 0 0 6',
valueField: 'id',
displayField: 'name',
store: cityStore,
queryMode: 'local',
listeners: {
select: function (Combox, record, index) {//联动效果
Ext.getCmp('City_id').setValue(this.value);
var district = Ext.getCmp('District');
district.clearValue();
district.store.removeAll();
districtStore.load({
params: {
action: 'city', parentid: this.value
}
});
}
}
}, {
emptyText: '请选择地区...',
flex: 3,
editable: false,
selectOnFocus: true,
xtype: 'combobox',
id: 'District',
name: 'District',
margins: '0 0 0 6',
valueField: 'id',
displayField: 'name',
store: districtStore,
queryMode: 'local',
listeners: {
select: function (Combox, record, index) {//联动效果
Ext.getCmp('District_id').setValue(this.value);
}
}
}]
}
默认选择
provinceStore.load();
provinceStore.on("load", function () {
Ext.getCmp('Provinces').select(provinceStore.getAt(9));//江苏省
}, provinceStore, true);
cityStore.load({
params: {
action: 'city', parentid: 10
}
});
cityStore.on("load", function () {
Ext.getCmp('City').select(cityStore.getAt(2));//徐州市
}, cityStore, true);
districtStore.load({
params: {
action: 'city', parentid: 110//区县
}
});
EXT 省市三级联动及默认选择的更多相关文章
- JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
- 利用select实现年月日三级联动的日期选择效果
× 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...
- [moka同学笔记]Yii下国家省市三级联动
第一次做省市三级联动时候遇到了坑,感觉还是自己太菜.头疼了很久研究了很久,最后终于发现了问题.大致总结一下思路 在控制器中实例化model,然后在视图中渲染所有国家,当选取国家时候,ajax通过 id ...
- 时间操作(JavaScript版)—年月日三级联动(默认显示系统时间)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35263317 这个功能 ...
- Webform——中国省市三级联动以及IsPostBack
首先要明白Webform的运行顺序,当开始启动时候,首先执行的是Page_Load事件, 当点击任意按钮后,每次点击都要先执行一遍Page_Load(在这里Page_Load里面的事件是给数据控件加载 ...
- Vue 国家省市三级联动
在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> < ...
- asp.net MVC4——省市三级联动
controller: public ActionResult GetCity(string id) { AreaService _areaSvc = new AreaService(); List& ...
- JS(JQuery) 省市区三级联动下拉选择
引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...
- Yii2中省市三级联动(栏目联动)
先从表的设计开始: 表的结构: CREATE TABLE `global_region` ( `region_id` smallint(5) unsigned NOT NULL AUTO_INCREM ...
随机推荐
- SSH框架构建微信公众帐号服务器小技巧
SSH框架构建微信公众帐号服务器小技巧 熟悉struts2和servlet的同学应该清楚,struts2的方法多样性弥补了servlet单一的doGet 和doPost方法.如果自己的公众账号服务器是 ...
- xcode代码提示功能失效的解决方法
xcode 自动提示很好用 然而大量的工作也是让他吃不消了 结果今天提示功能给我来了个罢工 这当然是不行的 也是万能的搜索帮我解决了这个问题 方法很多 选择了简单的 xcode --> Wind ...
- Android Studio安装更新终极解决方式
之前写过一篇Android SDK无法更新的博文,其实该方式对Android Studio同样有效,大伙可以下载网盘中分享的小软件,若搜索到通道后提示需要更细,也可以选择更新.参考:http://bl ...
- js 上传文件预览
1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div ...
- ios学习之路
整合网络资源和自己的实际经验,表述于此. 1 Xcode详解 非常实用的xcode介绍,详情请见外部链接http://demo.netfoucs.com/shulianghan/article/det ...
- Linux常用命令大全(share)
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...
- 台球游戏的核心算法和AI(2)
前言: 最近研究了box2dweb, 觉得自己编写Html5版台球游戏的时机已然成熟. 这也算是圆自己的一个愿望, 一个梦想. 承接该序列的相关博文: • 台球游戏核心算法和AI(1) 同时结合htm ...
- C语言解决八皇后问题
#include <stdio.h> #include <stdlib.h> /* this code is used to cope with the problem of ...
- javascript confirm()函数的用法
javascript confirm()函数的用法 confirm():确认消息对话框.用于允许用户做选择的动作.弹出的对话框中包含一确定按钮和一取消按钮. confirm(str) 参数说明: st ...
- JPush极光推送Java服务器端API
// 对android和ios设备发送 JPushClient jpush = new JPushClient(masterSecret, appKey); // 对android和ios设备发送 ...