Ext.js二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
var attr_city = ["嘉峪关","金昌"];
var attr_county = [
['嘉峪关'],
['河西堡','永昌县','金昌区']
]; Ext.onReady(function () {
//定义新的类FormPanel,并且把变化的属性暴露出来以便以后继承
var MyFormPanel = Ext.extend(Ext.form.FormPanel, {
title: '级联',
layout : 'table',
layoutConfig : {columns:8},
labelWidth: 80,
initComponent: function () {
this.items = [
{
fieldLabel : '市',
hiddenName : 'tmember.addressProvince',
xtype : 'combo',
allowBlank : false,
width:180,
labelWidth:20,
emptyText : '请选择市',
mode : 'local',
displayField : 'provinceName',
valueField : 'id',
id : 'city',
editable : false,
triggerAction : 'all',
lazyInit : false,
store :attr_city,
listeners:{
select : function(combo, record, index){
console.log(attr_county[record.internalId-1])
var fieldName=Ext.getCmp('county');
console.dir(fieldName)
Ext.getCmp('county').setValue(attr_county[record.internalId-1][0]);
Ext.getCmp('county').setStore(attr_county[record.internalId-1]); }
}
},
{
fieldLabel : '县',
labelWidth:20,
hiddenName : 'county',
xtype : 'combo',
width:180,
allowBlank : false,
emptyText : '请选择县',
mode : 'local',
displayField : 'county',
valueField : 'county',
id : 'county',
editable : false,
triggerAction : 'all',
lazyInit : false,
store:''
}, {
fieldLabel : '地址',
labelWidth:40,
id:'county1',
xtype : 'textfield',
grow : false,
colspan : 8
}
];
this.buttons = [{
text: '确 定',
handler: this.submit,//变化的部份
scope: this
}, {
text: '取 消',
handler: this.cancel,//变化的部份
scope: this
}];
MyFormPanel.superclass.initComponent.call(this, arguments); //调用父类的initComponent
}
}); //创建测试对象2
var testForm2=new MyFormPanel({
title: '覆盖属性',
usernameid:'usernameid',
submit: function () {
alert(this.usernameid);
},
cancel: function () {
testForm2.getForm().reset();
}
});
//创建窗体
var win = new Ext.Window({
title: '窗口',
id: 'window',
width: 700,
height: 420,
resizable: true,
closable: true,
maximizable: true,
minimizable: true,
items: [testForm2]
});
win.show();
});
</script>
</head>
<body>
</body>
</html>
Ext.js二级联动的更多相关文章
- 原生js二级联动
今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...
- js二级联动
<body> <section> <a>省份</a> <select id="province"> <option ...
- js 二级联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- xml+js+html的二级联动
首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...
- 省市二级联动--使用app-jquery-cityselect.js插件
只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...
- JS实现下拉单的二级联动
因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...
- 利用JS实现一个简单的二级联动菜单
前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...
- js:二级联动示例
联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...
- js小例子之二级联动
联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...
随机推荐
- 【简问】一些个人不会的问题,收到解答经核实OK的会在下方附注答案
1.p标签内放行内块(如,input)适宜么(已知p是块元素,但p内不宜放置div)? 2.如何单独设置文字下划线颜色? 3.行内元素可以定位吗? 4.支持 margin:0 auto; 的元素类型有 ...
- HBase数据模型(1)
HBase数据模型(1) HBase数据模型(2) 1.0 HBase的特性 Table HBase以表(Table)的方式组织数据,数据存储在表中. Row/Column 行(Row)和列(Colu ...
- Android Google Map API使用的八个步骤
本系列教程将分为两部分,第一部分是指导用户使用Mapview控件进行编程,其中包括了如何获得Google Map API,如何使用该API进行简单的开发,如何获得用户当前所在的位置.第二部分则包括如何 ...
- pt-table-checksum和pt-table-sync
环境:系统bsd,标准安装,ports安装的mysql. 主172.16.21.126 从172.16.21.128vi /etc/rc.conf 添加 mysql_enable="YES& ...
- 微软大礼包 | 集合在线学习资源,助你秒变AI达人
编者按:人工智能的浪潮正如火如荼地袭来,未来人工智能将大有所为,人们的生活轨迹也正在技术不断向前推进的过程中逐渐改变.人工智能不是科研人员或开发人员的专属,微软希望能够将人工智能带给每个人,从开发者到 ...
- 自定义标签jsp2格式
在写自定义标签时候是不是感觉很烦啊,其实人家也是这样认为的,于是我们的jsp新的标准对标签进行了更改,使我们用起来更简单.到底哪里简单呢?看看代码再说咯: 还是老规矩,先上一个标签的逻辑类: 1. p ...
- 洛谷 P2691 逃离
题目描述 一个n×n栅格是由n行和n列顶点组成的一个无向图,如图所示.用(i,j)表示处于第i行第j列的顶点.除了边界顶点(即满足i=1,i=n,j=1或j=n的顶点(i,j)),栅格中的所有其他顶点 ...
- 远程桌面连接(mstsc)无法断开的解决方案
某2008 r2有二个系统账户,同时允许两个tcp连接,但每个用户仅同时允许一人登录.不知何因,关闭远程桌面连接的窗口后,再次连接就瞬间提示无法被连接.查看了事件查看器,信息为被注销,这是因为设置了“ ...
- Android(java)学习笔记123:Android MediaPlayer 播放prepareAsync called in state 8解决办法
1. 使用android MediaPlayer播放音频文件时,有时会出现prepareasync called in state 8错误. 以下方法可以避免这个异常出现. 第1种方法: priva ...
- [学习总结] python语言学习总结 (二)
1.python中的拆包 之前就只写了*可以是未知数量的参数,**可以传入未知数量命名参数.这次详细记下拆包. def f1(a, *l): print(a) # 不拆包 print(l) # 拆包 ...