学习了 EXTJS ,项目中也有2级联动的需要,现将代码写下来作为笔记
1 这里 EXTJS 环境 后台都不做介绍了。有兴趣的朋友可以下载源码来研究一下。下面只贴一写EXTJS 方面的代码。项目借用了STRUTS2一些东西,这里也不在做介绍。
2前台代码
function form(){
var manufacturerid_store = new Ext.data.Store( {
autoLoad : true,
reader : new Ext.data.JsonReader( {
totalRecords : "results",
root : 'List'
}, Ext.data.Record.create([ {
name : 'id'
}, {
name : 'name'
}])),
proxy : new Ext.data.HttpProxy( {
url : 'getlist.action'
})
});
var deviceModel_store = new Ext.data.Store( {
autoLoad : false,
reader : new Ext.data.JsonReader( {
totalProperty : "results",
root : 'List'
}, Ext.data.Record.create([ {
name : 'id'
}, {
name : 'name'
}])),
proxy : new Ext.data.HttpProxy( {
url : 'getlist2.action'
})
});
var deviceModel_store;
var form = new Ext.FormPanel( {
id : 'tabpanel_seconde',
//renderTo : 'grid-mdmsSoftwarePackUp_1',
renderTo : 'form',
title : '第二步',
frame : true,
labelAlign : 'right',
buttonAlign : 'right',
defaults : {
width : 150
},
items : [new Ext.form.ComboBox( {
width : 200,
id:'secondeForm_manufacturerid',
//blankText : '必须选择厂商标识',
hiddenName : 'id',
name : 'name',
triggerAction : 'all',
allowBlank : false,
editable : false,// 禁止编辑
//loadingText : '正在加载厂商标识',// 加载数据时显示的提示信息
displayField : 'name',// 定义要显示的字段
valueField : 'id',
mode : 'remote',// 远程模式
//emptyText : '请选择厂商标识',
store : manufacturerid_store,
fieldLabel : '省',
listeners : {
"select" : function() {
var secondeForm_deviceModel=Ext.getCmp("secondeForm_deviceModel");
secondeForm_deviceModel.reset();
deviceModel_store.proxy = new Ext.data.HttpProxy( {
url : 'getlist2.action?id='
+ this.getValue()
});
deviceModel_store.load();
}
}
}),
new Ext.form.ComboBox( {
id:'secondeForm_deviceModel',
width : 200,
//blankText : '必须选择终端型号',
hiddenName : 'id',
name : 'name',
allowBlank : false,
triggerAction : 'all',
editable : false,// 禁止编辑
//loadingText : '正在加载终端型号',// 加载数据时显示的提示信息
displayField : 'name',// 定义要显示的字段
valueField : 'id',
mode : 'remote',// 远程模式
//emptyText : '请选择设备型号',
store : deviceModel_store,
fieldLabel : '市'
})
]
});
}
这里定义一个函数 其中前面2个是定义store是为了后台取得数据使用 定义一个form,里面有2个ComboBox.因为要实现2级联动,第一个ComboBox下拉后肯定要触发事件取得后台重新数据 所以实现原理也就是在该ComboBox 添加事件 见代码
listeners : {
"select" : function() {
var secondeForm_deviceModel=Ext.getCmp("secondeForm_deviceModel");
secondeForm_deviceModel.reset();
deviceModel_store.proxy = new Ext.data.HttpProxy( {
url : 'getlist2.action?id='
+ this.getValue()
});
deviceModel_store.load();
}
}
该段代码调用后台取得数据重新刷新第个ComboBox的store值 从而实现了2级联动
实现效果
下来第一个ComboBox
后面的市根据第一个ComboBox触发调用后台,切换省
源码附件中下载取得,可以自己运行没有数据库,后台数据时写死了(这里只是演示前台的技术,没搞那么复杂了)
- 大小: 3.3 KB
- 大小: 6 KB
- 大小: 6.5 KB
分享到:
相关推荐
Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子
Extjs4---combobox省市区三级联动+struts2
Extjs4---combobox联动实例
很多网友在问,Extjs4.0 ComboBox如何实现,好在之前用3.x实现过一个三级联动,如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的model:’local’在Extjs4.0中用queryMode: ‘local’来表示,而且在...
NULL 博文链接:https://chenxueyong.iteye.com/blog/336117
ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——...
Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...