extjs 省市县级联
Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'nevalue'},
{type: 'string', name: 'contents'}
]
});
var sheng = Ext.create('Ext.data.Store', {
model: 'State',
proxy: {
type: 'ajax',
actionMethods: {
read: 'POST'
},
url: h.url + '/t/101',
reader: {
type: 'json'
}
},
autoLoad: true
});
var shi = Ext.create('Ext.data.Store', {
model: 'State',
proxy: {
type: 'ajax',
actionMethods: {
read: 'POST'
},
url: h.url + '/t/102',
reader: {
type: 'json'
}
},
autoLoad: false
});
var xian = Ext.create('Ext.data.Store', {
model: 'State',
proxy: {
type: 'ajax',
actionMethods: {
read: 'POST'
},
url: h.url + '/t/103',
reader: {
type: 'json'
}
},
autoLoad: false
});
Ext.create("Ext.panel.Panel", {
renderTo: document.body,
width: 290,
height: 220,
title: "城市三级联动",
plain: true,
margin: '30 10 0 80',
bodyStyle: "padding: 45px 15px 15px 15px;",
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
xtype: "combo",
name: 'sheng',
id: 'sheng',
fieldLabel: '选择省',
displayField: 'contents',
valueField: 'nevalue',
store: sheng,
triggerAction: 'all',
queryMode: 'local',
minChars: 1 ,
editable: false,
emptyText: '',
blankText: '',
listeners: {
select: function (combo, record, index) {
try {
var parent = Ext.getCmp('shi');
var parent1 = Ext.getCmp("qu");
parent.clearValue();
parent1.clearValue();
parent.store.load({params: {id: this.value}});
}
catch (ex) {
Ext.MessageBox.alert("错误", "数据加载失败。");
}
}
}
},
{
xtype: "combo",
name: 'shi',
id: 'shi',
fieldLabel: '选择市',
displayField: 'contents',
valueField: 'nevalue',
store: shi,
triggerAction: 'all',
queryMode: 'local',
minChars: 1 ,
editable: false,
emptyText: '',
blankText: '',
listeners: {
select: function (combo, record, index) {
try {
var parent = Ext.getCmp("qu");
parent.clearValue();
parent.store.load({params: {id: this.value}});
}
catch (ex) {
Ext.MessageBox.alert("错误", "数据加载失败。");
}
}
}
},
{
xtype: "combo",
name: 'qu',
id: 'qu',
fieldLabel: '选择区',
displayField: 'contents',
valueField: 'nevalue',
store: xian,
triggerAction: 'all',
queryMode: 'local',
minChars: 1 ,
editable: false,
emptyText: '',
blankText: ''
}
]
})

extjs 省市县级联的更多相关文章
- ExtJs 之 ComboBox级联使用
刚接触ExtJs不到一周,项目使用ExtJs框架,有个版块用到了combobox的级联(两级),遇到了一系列的问题,两天来一直查API.网络资料,终于解决了. 先列出遇到的一系列问题(也许你也遇到过! ...
- distpicker 省市县级联
一.前言:想着每次写项目都要遇到省市县级联,就想找一个比较简单好用的插件来...感觉挺不错~~~ 二.例子: html : 效果: 还有很多种用法,我这里只放一种,插件文件里index.html有介绍 ...
- extjs tree check 级联选择
extjs4 tree check 级联选择 实现效果: 关键代码: function changeAllNode(node, isCheck) { allChild(node, isCheck); ...
- ABAP 省市县级联搜索帮助
在展示ABAP代码之前,先建立自建表ZCHENH006,表中包含两个关键字段 BELNR(地区编码),SDESC(地区描述). 编码规则参考:身份证前六位地区编码规则,可参考我另外一篇Blog导入系统 ...
- 【前端】Element-UI 省市县级联选择器 JSON数据
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/element_cascader.html 不想自己处理的就直接下载吧 http://shamoyuu.bj.bce ...
- mobile plugin
http://fronteed.com/iCheck/ http://spritely.net/documentation/ http://www.mobilexweb.com/blog/mobile ...
- postgresql 10 ltree 使用说明
官方文档 https://www.postgresql.org/docs/10/static/ltree.html ltree是俄罗斯Teodor Sigaev和Oleg Bartunov共同开发的P ...
- Select2使用方法汇总
引用: <script src="~/Content/plugins/select2/select2.min.js"></script> 1.简单使用 $. ...
- cola-ui的使用
[toc] > 官方:[http://www.cola-ui.com](http://www.cola-ui.com) > > 教程位置:[http://www.cola-ui.co ...
随机推荐
- 4. 基本socket函数
一.创建socket /* 创建一个socket */ int socket(int family, int type, int protocol); /* 参数说明 */ // domain:使用哪 ...
- 第9次Scrum会议(10/21)【欢迎来怼】
一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华小组照片 二.开会信息 时间:2017/10/21 17:20~17:45,总计25min.地点:东北师范 ...
- Docker 技术 介绍
https://github.com/docker/docker 实现用户空间隔离的技术:名称空间(NameSpace),CGroup(控制组) 什么是NameSpace::简单的理解就是,每一个虚拟 ...
- 运维工程师如果将web服务http专变为https
1:生成私钥 2:生成证书签署请求 3:在提供CA签署的web网站上,提交生成的证书签署请求 4:下载已经签署的CA证书 5:将证书的信息保留在web服务器中,且应用到提供web服务的 ...
- 奇异值分解(SVD) --- 几何意义 (转载)
PS:一直以来对SVD分解似懂非懂,此文为译文,原文以细致的分析+大量的可视化图形演示了SVD的几何意义.能在有限的篇幅把 这个问题讲解的如此清晰,实属不易.原文举了一个简单的图像处理问题,简单形象, ...
- 小程序 setData() 方法
setData() 参数格式 字段 类型 必填 描述 最低版本 data Object 是 这次要改变的数据 callback Function 否 回调函数 1.5.0 callback 是一个 ...
- HDU 4758——Walk Through Squares——2013 ACM/ICPC Asia Regional Nanjing Online
与其说这是一次重温AC自动机+dp,倒不如说这是个坑,而且把队友给深坑了. 这个题目都没A得出来,我只觉得我以前的AC自动机的题目都白刷了——深坑啊. 题目的意思是给你两个串,每个串只含有R或者D,要 ...
- POJ2823_Sliding Window
以前也碰到过这种类型的题目,以前好像做出来过,但是忘记了,这次又坑了. 题目很简单,对于从前到后每一个连续的长度为k的数字,求出这段数字中的最大的数字和最小的数字. 一开始我用离散化+树状数组来更新和 ...
- Java虚拟机的内存管理
众所周知,Java程序员写的代码是没有办法控制Java对象的内存释放的,完全有JVM暗箱操作. 虽然程序员把内存的释放的任务都交给了Java虚拟机,但是并不代表Java程序就不存在内存泄漏. 反而,某 ...
- 使用Runtime.getRuntime().exec()方法的几个陷阱
Process 子类的一个实例,该实例可用来控制进程并获得相关信息.Process 类提供了执行从进程输入.执行输出到进程.等待进程完成.检查进程的退出状态以及销毁(杀掉)进程的方法. 创建进程的方法 ...