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 省市县级联的更多相关文章

  1. ExtJs 之 ComboBox级联使用

    刚接触ExtJs不到一周,项目使用ExtJs框架,有个版块用到了combobox的级联(两级),遇到了一系列的问题,两天来一直查API.网络资料,终于解决了. 先列出遇到的一系列问题(也许你也遇到过! ...

  2. distpicker 省市县级联

    一.前言:想着每次写项目都要遇到省市县级联,就想找一个比较简单好用的插件来...感觉挺不错~~~ 二.例子: html : 效果: 还有很多种用法,我这里只放一种,插件文件里index.html有介绍 ...

  3. extjs tree check 级联选择

    extjs4 tree check 级联选择 实现效果: 关键代码: function changeAllNode(node, isCheck) { allChild(node, isCheck); ...

  4. ABAP 省市县级联搜索帮助

    在展示ABAP代码之前,先建立自建表ZCHENH006,表中包含两个关键字段 BELNR(地区编码),SDESC(地区描述). 编码规则参考:身份证前六位地区编码规则,可参考我另外一篇Blog导入系统 ...

  5. 【前端】Element-UI 省市县级联选择器 JSON数据

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/element_cascader.html 不想自己处理的就直接下载吧 http://shamoyuu.bj.bce ...

  6. mobile plugin

    http://fronteed.com/iCheck/ http://spritely.net/documentation/ http://www.mobilexweb.com/blog/mobile ...

  7. postgresql 10 ltree 使用说明

    官方文档 https://www.postgresql.org/docs/10/static/ltree.html ltree是俄罗斯Teodor Sigaev和Oleg Bartunov共同开发的P ...

  8. Select2使用方法汇总

    引用: <script src="~/Content/plugins/select2/select2.min.js"></script> 1.简单使用 $. ...

  9. cola-ui的使用

    [toc] > 官方:[http://www.cola-ui.com](http://www.cola-ui.com) > > 教程位置:[http://www.cola-ui.co ...

随机推荐

  1. text-align与vertical-align属性的区别

    1.text-align属性设置元素在水平方向(x轴)的位置 text-align:left://文本居左 text-align:center://文本居中 text-align:right: //文 ...

  2. fast-IO

    代码: int Scan() //输入外挂 { ,ch,flag=; if((ch=getchar())=='-') flag=; ') res=ch-'; ') res=res*+ch-'; ret ...

  3. WPF和Expression Blend开发实例:Adorner(装饰器)应用实例

    装饰器-- 表示用于修饰 UIElement 的 FrameworkElement 的抽象类 简单来说就是,在不改变一个UIElement结构的情况下,将一个Visual对象加到它上面. 应用举例: ...

  4. 【转】关于cgi、FastCGI、php-fpm、php-cgi

    转自 知乎 的 一个回答 首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. web server(比如说nginx)只是内容的分发者.比如 ...

  5. mysql导出/导入表结构以及表数据

    导出: 命令行下具体用法如下:  mysqldump -u用戶名 -p密码 -d 数据库名 表名 脚本名; 1.导出数据库为dbname的表结构(其中用戶名为root,密码为dbpasswd,生成的脚 ...

  6. Remember the Word UVALive - 3942(dp+trie)

    题意: 给S个不同的单词和一个长字符串 问将其分解为若干个单词有多少种方法(单词可重复使用) 解析: dp[i]表示在这个字符串中以某个位置i为起点的 的一段子字符串 则这个子字符串若存在某个前缀恰好 ...

  7. TCP(Transmission Control Protocol)学习笔记

    一.TCP(Transmission Control Protocol)原理介绍(参考维基百科) TCP连接包括三种状态:连接建立.数据传送和连接终止. TCP用三路握手(three-way hand ...

  8. 洛谷 P3398 仓鼠找sugar 解题报告

    P3398 仓鼠找sugar 题目描述 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐厅(b),而 ...

  9. http_load - 集成测试工具之

    http_load是基于linux平台的性能测试工具,它体积非常小,仅100KB.它以并行复用的方式运行,可以测试web服务器的吞吐量与负载. 1 官方地址  http://www.acme.com/ ...

  10. redis 命令行客户端utf8中文乱码问题

    只需要你在启动redis-cli时在其后面加上--raw参数即可启动后 再显示就正常了