Extjs之combobox联动
Ext.Loader.setConfig({
enabled : true
});
Ext.Loader.setPath('Ext.ux', '../extjs/ux');
Ext.require([ 'Ext.form.*', 'Ext.data.*', 'Ext.grid.Panel' ]); Ext.onReady(function() {
Ext.QuickTips.init();
var bodyWidth;
var bodyHeight;
var panelWidth = bodyWidth;
var panelHeight = bodyHeight; Ext.define('com_data', {
extend: 'Ext.data.Model',
fields: [ 'id', 'name' ]
}); var com1_store = Ext.create('Ext.data.Store', {
autoDestroy: true,
fields: ['com1id','com1name'],
data: [{
'com1id':"1",
'com1name':"北京"
},{
'com1id':"2",
'com1name':"河北"
},{
'com1id':"3",
'com1name':"内蒙古"
}]
}); var com2_store = Ext.create('Ext.data.Store', {
autoDestroy: true,
model: 'com_data'
}); var myPanel = Ext.create('Ext.panel.Panel', {
id: 'myPanel',
name: 'myPanel',
width: panelWidth,
height: panelHeight,
title: 'Extjs嵌入html',
bodyPadding: '10 10 10 10',
items: [{
xtype: 'combobox',
id: 'com1',
name: 'com1',
store: com1_store,
valueField: 'com1id',
displayField: 'com1name',
queryMode: 'local',
fieldLabel: '请选择地区',
width: 200,
labelWidth: 100,
listeners: {
change: function(){//匿名函数
var com1id = Ext.getCmp("com1").getValue();
com2_store.removeAll(false);
if(com1id == "1"){
var data1 = Ext.create('com_data', {
id: '1',
name: '海淀区'
});
com2_store.add(data1);
var data2 = Ext.create('com_data', {
id: '2',
name: '朝阳区'
});
com2_store.add(data2);
var data3 = Ext.create('com_data', {
id: '3',
name: '丰台区'
});
com2_store.add(data3);
} else if(com1id == "2"){
var data1 = Ext.create('com_data', {
id: '1',
name: '石家庄'
});
com2_store.add(data1);
var data2 = Ext.create('com_data', {
id: '2',
name: '保定市'
});
com2_store.add(data2);
var data3 = Ext.create('com_data', {
id: '3',
name: '邯郸市'
});
com2_store.add(data3);
} else if(com1id == "3"){
var data1 = Ext.create('com_data', {
id: '1',
name: '呼和浩特市'
});
com2_store.add(data1);
var data2 = Ext.create('com_data', {
id: '2',
name: '赤峰市'
});
com2_store.add(data2);
var data3 = Ext.create('com_data', {
id: '3',
name: '包头市'
});
com2_store.add(data3);
} else {
//空
}
}
}
}, {
xtype: 'combobox',
id: 'com2',
name: 'com2',
store: com2_store,
valueField: 'id',
displayField: 'name',
queryMode: 'local',
fieldLabel: '请选择城市',
width: 200,
labelWidth: 100
}]
});
myPanel.render(document.body); Ext.onDocumentReady(function() {
//gridstoreLoad();
}); window.onresize=function(){
bodyHeight = window.innerHeight?(window.innerHeight<600?600:window.innerHeight):document.documentElement.clientHeight;
bodyWidth = window.innerWidth?window.innerWidth:document.body.offsetWidth;
}; });
上面的方式是通过选择下拉框1的值改变下拉框2的值,在下拉框1改变时通过store的add方法添加下拉框2要显示的值,也可以通过获得下拉框1的值使用store的load的方法到后台查找下拉框2要显示的值。
效果:
Extjs之combobox联动的更多相关文章
- ExtJs 之 ComboBox级联使用
刚接触ExtJs不到一周,项目使用ExtJs框架,有个版块用到了combobox的级联(两级),遇到了一系列的问题,两天来一直查API.网络资料,终于解决了. 先列出遇到的一系列问题(也许你也遇到过! ...
- Extjs4 Combobox 联动始终出现loading错误的解决的方法
当反复选者combobox 联动时,下级的Combobox 会出现loading的错误表现形式,尽管Store数据已载入完也是一样. 废话少说贴代码就知道怎样处理了:(注意红色部分的关键语句) }, ...
- vs2013+MVC3.0+EasyUI的ComboBox联动使用(二)
vs2013+MVC3.0+EasyUI的ComboBox联动使用(二) 简单介绍:在vs2013(.net4.0)中使用MVC3.0对于EasyUI中ComboBox的联动使用. 载入Comb ...
- Extjs学习笔记(-):ComboBox联动
http://www.cnblogs.com/wumin97136/archive/2007/12/24/1012720.html http://examples.ext.net/ http://ex ...
- Extjs 让combobox写起来更简单
也已经写了很久时间的extjs ,每次都用到很多的combobox,配置很多东西觉得实在是太麻烦,所以根据常用到的情况写了一个简便的combobox,再次记录下来,以免放在某个地方忘记了找不到了. 定 ...
- Ext 4.2以后版本 ComboBox 联动
//combox树 ComboTree: function (upDep, empStore) { var com = Ext.create('Ext.ux.desktop.ComboTree', { ...
- C# Combobox联动
接上一篇博文,对界面做一个小修改,做4个combobox,形成窗口之间的联动: 界面如下: 选择combobox里的条件,单击查询获取数据 首先连接数据库,获取到数据到第一个combobox里,代码在 ...
- TopJUI Combobox 联动
这里给联动进行一个简单定义:因Combobox选择或输入的值发生改变时对自身或者其它组件产生影响称为联动.(注:editable确定是否可以手动输入) 有两种实现方法: 一.自己写对应的onChang ...
- Extjs 中combobox下拉框初始化赋值
近日在工作中遇到一个需求,要求页面初始化的时候给dataGrid表插入一条数据. 前端使用的是Extjs框架,dataGrid表有四列,其中三列是类型为textbox,普通文本框,另外一列类型是com ...
随机推荐
- MVVM模式中WPF数据的完全绑定
一:截图,描述:将后台代码的姓名.年龄绑定到文本框,单击”增加年龄“--年龄自+1,单击”显示年龄“--弹出年龄的显示对话框,实现了从文本框修改年龄和后台更改年龄并显示到文本框 运行结果和解决方案管理 ...
- Android Service命令
service可给Android 服务传消息,具体用法如下: Usage: service [-h|-?] service list service check SERVI ...
- CodeForces 593A
题目链接: http://codeforces.com/problemset/problem/593/A 题意: 给你n个字符串,字符串只包含小写字母,从中选取任意个字符串,拼成一封信,这封信中至多有 ...
- 使用HttpWebRequest进行请求时发生错误:基础连接已关闭,发送时发生错误处理
原文地址:http://blog.csdn.net/hawksoft/article/details/21776009 最近调试原来的微信模拟登陆时发生了“基础连接已关闭,发送时发生错误”的错误提示, ...
- 【JS跨域请求】Ajax跨域请求JSONP
前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...
- WinForm自定义验证控件
本文转载:http://blog.csdn.net/ziyouli/article/details/7583824 此篇博文不错:http://blog.csdn.net/sony0732/artic ...
- ios中xib的使用介绍
ios中Xib的使用 ios中xib的使用 Nib files are the quintessential(典型的) resource type used to create iOS and Mac ...
- 有向图的欧拉路径POJ2337
每个单词可以看做一条边,每个字母就是顶点. 有向图欧拉回路的判定,首先判断入度和出度,其实这个题判定的是欧拉通路,不一定非得构成环,所以可以有一个点的顶点入度比出度大1,另外一个点的出度比入度大1,或 ...
- JPA事务回滚配置
<!-- 配置事务管理器 --> <bean id="transactionManager" class="org.springframework.or ...
- Python开发【第一篇】:目录
本系列博文包含 Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习编程的童鞋提供一点帮助!!! Python开发[第一篇]:目录 Python开发[第二篇]:初识Python ...