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. Divide by three, multiply by two(DFS+思维)

    Polycarp likes to play with numbers. He takes some integer number x, writes it down on the board, an ...

  2. 使用git提交代码的一些小心得

    1.不进行push不能运行的代码,如果需要提交,可以先注释,保证其他人pull时,可以得到能够正常使用的代码 2.每做完一件事,写一条描述,一次提交.不要等写了一堆代码,然后写一堆描述,这样如果需要查 ...

  3. JAVA之路(一)

    距离做下复习JAVA并学好JAVA的决定已经过去一周了,我买了慕课网的JAVA入门视频,在图书馆借了三本关于JAVA的书——两本是JAVA入门经典,一本是JAVA WEB开发宝典.我的计划是短时间内复 ...

  4. lintcode-223-回文链表

    223-回文链表 设计一种方式检查一个链表是否为回文链表. 样例 1->2->1 就是一个回文链表. 挑战 O(n)的时间和O(1)的额外空间. 标签 链表 思路 找到链表中点后,翻转链表 ...

  5. Java package

    Java中的一个包就是一个类库单元,包内包含有一组类,它们在单一的名称空间之下被组织在了一起.这个名称空间就是包名.可以使用import关键字来导入一个包.例如使用import java.util.* ...

  6. Apache 的知识点

    apache 的官方文档 http://httpd.apache.org/docs/ Mac下如何查看Apache的版本 在终端(Terminal)中输入 apachectl -v,之后回车,结果如下 ...

  7. 6/2 sprint2 看板和燃尽图的更新

  8. Objective - C 之延展

    延展:为已有的类新增私有方法,只能在本类中使用 一.创建过程: 二.总结: 1.延展只有.h文件,在其中写新方法的声明,在原本的类(Person)中写方法的实现: 2.上述的方法其实很不安全,因为如果 ...

  9. jdbc 小结

    1,PreparedStatement/Statement区别: 1,防止sql注入式攻击(sql注入:就是通过非正常手段(比如在url中添加参数)),将sql文执行(比如or 1=1) 2,Prep ...

  10. PHP之implode()方法

    implode — 将一个一维数组的值转化为字符串 string implode ( string $glue , array $pieces ) string implode ( array $pi ...