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 省市三级联动及默认选择的更多相关文章

  1. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  2. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

  3. [moka同学笔记]Yii下国家省市三级联动

    第一次做省市三级联动时候遇到了坑,感觉还是自己太菜.头疼了很久研究了很久,最后终于发现了问题.大致总结一下思路 在控制器中实例化model,然后在视图中渲染所有国家,当选取国家时候,ajax通过 id ...

  4. 时间操作(JavaScript版)—年月日三级联动(默认显示系统时间)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35263317         这个功能 ...

  5. Webform——中国省市三级联动以及IsPostBack

    首先要明白Webform的运行顺序,当开始启动时候,首先执行的是Page_Load事件, 当点击任意按钮后,每次点击都要先执行一遍Page_Load(在这里Page_Load里面的事件是给数据控件加载 ...

  6. Vue 国家省市三级联动

    在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> < ...

  7. asp.net MVC4——省市三级联动

    controller: public ActionResult GetCity(string id) { AreaService _areaSvc = new AreaService(); List& ...

  8. JS(JQuery) 省市区三级联动下拉选择

    引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...

  9. Yii2中省市三级联动(栏目联动)

    先从表的设计开始: 表的结构: CREATE TABLE `global_region` ( `region_id` smallint(5) unsigned NOT NULL AUTO_INCREM ...

随机推荐

  1. Hibernate 检索策略

    概述 检索数据时的 2 个问题: –不浪费内存:当 Hibernate 从数据库中加载 Customer 对象时, 如果同时加载所有关联的 Order 对象, 而程序实际上仅仅需要访问 Custome ...

  2. ASP.NET——生成验证码

    实现:随机生成四位数字的验证码,点击验证码可无刷新生成新的验证码,最后点击按钮进行检验 PS:本实例使用UpdatePanel实现无刷新. 前台代码: <asp:ScriptManager ID ...

  3. a few changes of Android 5.0

    1.Service Intent must be explicit Intent serviceIntent = new Intent(context,MyService.class);context ...

  4. 巧用TexturePacker命令行

    游戏开发使用TexturePacker来生成图片的atlas sheet, 工具非常好用. 一般GUI的方法, 新建一个tps文件, 将要图片加载进来,调整参数和输出路径, 最后点publish. 在 ...

  5. Nagios NSclient Failed to get CPU value: \238(_total)\6: Failed to get mutex :(

    一台Windows Server 2012的nsclient出现以下的错误,表示无法获得CPU信息 2016-08-08 10:31:33: e:..\..\..\..\trunk\modules\C ...

  6. Linux压缩那些事儿

    tar简介 Linux的压缩命令的源文件只能有一个,这意味在压缩之前不得不先将要压缩的所有文件打包成一个包,然后再压缩包,这样来完成对多个文件的压缩.所以在了解解压缩之前就必须先了解打包命令. Lin ...

  7. nginx配置文件重写url不带index.php

    如题: 代码 location / { root /项目目录/; index index.php; if (-f $request_filename/index.php){ rewrite (.*) ...

  8. css实现阴影效果(box-shadow)

    box-shadow 使用方法 设置块阴影 语法: box-shadow:<length> <length> <length> <length> ||  ...

  9. VISIBLE、INVISIBLE、GONE的区别

    VISIBLE:设置控件可见 INVISIBLE:设置控件不可见 GONE:设置控件隐藏 而INVISIBLE和GONE的主要区别是:当控件visibility属性为INVISIBLE时,界面保留了v ...

  10. ES TIPS

    1,Testing Analyzers Especially when you are new to Elasticsearch, it is sometimes difficult to under ...