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 ...
随机推荐
- 20172305 2018-2019-1 《Java软件结构与数据结构》第六周学习总结
20172305 2018-2019-1 <Java软件结构与数据结构>第六周学习总结 教材学习内容总结 本周内容主要为书第十章内容: 树(一种非线性结构,其中的元素被组织成一个层次结构) ...
- HDU 5496 Beauty of Sequence
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5496 Beauty of Sequence Problem Description Sequence ...
- Windows Forms编程实战学习:第一章 初识Windows Forms
初识Windows Forms 1,用C#编程 using System.Windows.Forms; [assembly: System.Reflection.AssemblyVersion(& ...
- 转 docker的下载与安装
百度网盘下载地址:https://oomake.com/download/docker-windows 道客地址: https://link.jianshu.com/?t=https://get.da ...
- DNS缓存服务器的配置步骤
yum安装bind 编辑主配置文件/etc/named.conf 修改全局配置文件段 listen-on port 53 {172.16.19.45;}; //allow-query ...
- spring复杂数据类型传递
1.VO对象与PO对象的区别: PO(persistant object) 持久对象:通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库中的表相映射的java对象.最简单的PO ...
- jQuery之过滤选择器
在原有选择器匹配的元素中进一步进行过滤的选择器 * 基本 * 内容 * 可见性 * 属性 需求 1. 选择第一个div 2. 选择最后一个class为box的元素 3. 选择所有class属性不为bo ...
- 对Excle的行和列进行检查 单元格类型转换代码 ;
对Excle的行和列进行检查 转换代码 : ** * 导入信息 */ @Override public List<Object> add(HttpServletRequest reque ...
- 用友 SAP 金蝶 季报
用友 2018Q3季报 营收:.42亿 营收收入同比增长:42.36% 净利润:.35万 净利润同比增长率:113.83% 销售毛利率:66.88% 销售净利率:19.29% 用友2017财年年报 营 ...
- sleep() 与 wait()的比较
1.这两个方法来自不同的类分别是,sleep来自Thread类,和wait来自Object类. sleep是Thread的静态类方法,谁调用的谁去睡觉,即使在a线程里调用了b的sleep方法,实际上还 ...