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 ...
随机推荐
- Longge's problem(欧拉函数应用)
Description Longge is good at mathematics and he likes to think about hard mathematical problems whi ...
- The Bits (思维+找规律)
Description Rudolf is on his way to the castle. Before getting into the castle, the security staff a ...
- Python:模块学习——os模块
os模块提供了多个访问操作系统服务的功能 os模块中一些重要的函数和变量 os.name 显示当前使用平台 os.getcwd() 显示当前Python脚本工作路径 os.listdir('dirna ...
- 读我是一只it小小鸟有感!!!
<<我是一只it小小鸟>>是老师为我们这些即将步入it行业的新人推荐的一本书,通过这本书的简介知道它是由一群it学子共同创造而成的,每个人分别讲述各自的成长经历.书的开篇是本书 ...
- 做更好的自己 ——读《我是IT小小鸟》有感
转眼间大一已经过了一大半了,到了大学,才发现初高中时父母所说的“到了大学你就轻松了···”都是骗人的.但我脑海里却一直被这个观点所支配,以至于我在大一上学期里无所事事,不知道干些什么.学习也没重视,分 ...
- Jmeter 快速入门--初识线程组
添加线程组 (1)thread group(线程组),setup thread group相当于lr初始化“环境”的初始化脚本,teardown thread group相当于lr测试完毕后对应的清除 ...
- Java多线程 -sleep 用法详解
阿里面试官问我这个问题,我仔细总结了一下: 参考:sleep.yield.wait.join的区别(阿里面试) 我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段时间.那么你有没有正确 ...
- Ubuntu的IP地址配置
概况和需求: 我的主机上有两块网卡,识别后分别是eth0和eth1.eth0配置需要为静态ip,eth1配置为使用动态主机协议获取ip地址. 步骤: 首先碰到的一个问题就是不知道eth0和eth1对应 ...
- bzoj1272 Gate Of Babylon(计数方法+Lucas定理+乘法逆元)
Description Input Output Sample Input 2 1 10 13 3 Sample Output 12 Source 看到t很小,想到用容斥原理,推一下发现n种数中选m个 ...
- [五]SpringBoot 之 连接数据库(JPA-Hibernate)
在具体介绍之前,先了解下什么是JPA JPA全称JavaPersistence API.JPA通过JDK5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. http: ...