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 ...
随机推荐
- [强连通分量] POJ 2186 Popular Cows
Popular Cows Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 31815 Accepted: 12927 De ...
- AspectJ的基本使用
参考: https://my.oschina.net/itblog/blog/208067
- 如何提高Service的优先级避免被杀死或者杀死后如何再次重启Service?
2014-01-21 16:45:02 我们知道,当进程长期不活动时,如果系统资源吃紧,会杀死一些Service,或不可见的Activity等所在的进程. 如何避免Service被系统杀死,随便在网上 ...
- Linux提供两个格式化错误信息的函数
#include “stdio.h” Void perror(__const char *__s); 其中__s是出现错误的地方,函数向标准错误输出设备输出如下:s:错误的详细信息. Eg.perro ...
- poj3660 floyd
//Accepted 176 KB 16 ms //一头牛,如果rank是能确定的,那么能打败他的牛的个数和被他打败的牛的个数的总和为n-1 #include <cstdio> #incl ...
- 简单的线性分类——MATLAB,python3实现
看李政轩老师讲的Kernel,讲的非常好!前面有几道作业题,用MATLAB简单做了下,不知道对不对,错误之处还请指出. 题目是这样的. 一.MATLAB版本: clear; clc % 生成train ...
- MVC中的自定义控件
MVC中的控件都是HtmlHelper的扩展方法(不了解扩展方?法请阅读扩展方法),比如@Html.ActionLink,F12可以看到它是这样写的: public static MvcHtmlStr ...
- php轮流排序,每隔一定的时间轮流进行位置排序,轮询的排行榜:function dataPollingInterval()
/* * @名称: php ,对数组每隔一定的时间(自设定时间)来轮流进行位置排序,轮询的排行榜. 精确到指定的秒 或 分钟 或 小时 或 天 ,对数据列表进行轮排. * @参数: (array)$l ...
- Android 学习第11课,android 实现拨打电话的功能
1. 先布局界面,界面采用线性垂直方式来布局 在layout 界面文件中 activity_main.xml 中 <LinearLayout xmlns:android="http:/ ...
- Java-->Gson序列化及反序列化
--> 首先导入jar包,并添加到Build Path --> 需要User类:有属性.构造方法和setter.getter方法. --> Test 测试类: package com ...