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 ...
随机推荐
- HDU 1523 Decoding Morse Sequences
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1523 此题大意为 给你一串摩尔斯密码 再给你一个字典(下面单词本) 用下面的单词组合成给你的摩尔斯密 ...
- linux运维社区站点收集
1, 新世纪linux社区 offical locator: http://www.21ops.com/industry-news/24370.html 2,
- Selenium webdriver 操作chrome 浏览器
Step1: 下载chromedriver. 下载路径: http://chromedriver.storage.googleapis.com/index.html 选择一个合适的下载即可.我下载的是 ...
- jquery常用见的正则表达式
quickexpr = /^(?:[^<]*(<[ww]+>)[^>]*$|#([w-]+)$)/ (?:…)表示是一个非捕获型 [^<]表示是以"<& ...
- Ubuntu系统下MySQL读取文件数据ERROR解决
博文链接:http://haoyuanliu.github.io/2016/04/29/mysql/ 对,我是来骗访问量的!O(∩_∩)O~~ 在使用MySQL进行文件数据读取的时候,在终端敲入命令行 ...
- 【转】Android开发中的SQLite事务处理,即beginTransaction()方法
使用SQLiteDatabase的beginTransaction()方法可以开启一个事务,程序执行到endTransaction() 方法时会检查事务的标志是否为成功,如果程序执行到endTrans ...
- 一行代码实现iOS序列化与反序列化(runtime)
一.变量声明 为便于下文讨论,提前创建父类Biology以及子类Person: Biology: @interface Biology : NSObject { NSInteger *_hairCou ...
- 正则表达式中/i,/g,/ig,/gi,/m的区别和含义
正则表达式中/i,/g,/ig,/gi,/m的区别和含义 /i (忽略大小写)/g (全文查找出现的所有匹配字符)/m (多行查找)/gi(全文查找.忽略大小写)/ig(全文查找.忽略大小写)
- vim中选择匹配文本删除技巧
试举几例如下: 如何只保留匹配内容行而删除其他行? :v/pattern/d :help :v 如何对每行只保留匹配内容而删除这一行中的其它内容 :%s/^.pattern.$/\1/g 删除包含特定 ...
- Python之路,Day13-----暂无正在更新中
Python之路,Day13-----暂无正在更新中