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. iOS开发Swift篇—(九)属性

    iOS开发Swift篇—(九)属性 一.类的定义 Swift与Objective-C定义类的区别 Objective-C:一般需要2个文件,1个.h声明文件和1个.m实现文件 Swift:只需要1个. ...

  2. pycharm的快捷方式

    PyCharm3.0默认快捷键(翻译的)1.编辑(Editing)Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift ...

  3. CentOS Mysql 5.1.73 主从配置

    ---------------------------------------------- 1 修改my.cnf ------------------------------------------ ...

  4. 支持Android iOS,firefox(其它未测)的图片上传客户端预览、缩放、裁切。

    var version = '007'; var host = window.location.host; function $$(id){return document.getElementById ...

  5. ubuntu下搭建samba服务器

    samba是用于linux和windows下文件共享的协议 首先,更新源并安装samba sudo apt-get update sudo apt-get install samba 然后创建一个共享 ...

  6. eclipse working sets 视图 解决Other Projects不见问题

    请移步: http://note.youdao.com/yws/public/redirect/share?id=d54cac4232078f9acab551d62337a2d1&type=f ...

  7. 如何把TOMCAT 添加到服务中自动启动

    1.配置系统参数: JAVA_HOME:C:\Program Files\Java\jdk1.8.0_51   //本机Jdk的安装路径,已配置相关Java应用的无需再配置. CATALINA_HOM ...

  8. CI整合Smarty

    1.到相应的站点下载smarty模板: 2.将源代码中的libs目录复制到项目的libraries目录下,改名为smarty3.0 3.在项目目录的libraries文件夹内新建文件ci_smarty ...

  9. js 中json字符串转化json对象

    JSON字符串:var str = '{ "name": "cxh", "sex": "man" }'; JSON对象: ...

  10. LVS的调度算法

    LVS的调度算法(Scheduling Method)一共有10种 一.静态方法:仅根据算法本身进行调度 1.rr(Round Robin):轮询 2.wrr(Werghted Round Robin ...