文档目标：实现extJs之ComboBox联动
1、html代码
<body>
<!-- 定义form显示Div-->
<div id="mmFormDiv" style="height: 50px;"></div>
</body>
2、Javascript代码
var comboShipOption= Ext.decode("<%=shipStr%>");
var comboDepOption="<%=depStr%>";
comboDepOption = comboDepOption.split("@");
var mmQuery_form = new Ext.form.FormPanel({
id:'mmQueryForm',
frame : true,
border : false,
labelWidth:55,
width:250,
height:30,
region:'north',//定义在border layout中显示位置
buttons: [{
id:'find_btn',
text: '搜索',
clickEvent:function(){
//你的处理逻辑
}
}]
});
var dep_query_comboBox = null;
if(comboDepOption != '[]'){
dep_query_comboBox = new Ext.form.ComboBox({
id:'depQueryComboBox',
fieldLabel : 部门名称,
name:'depName',
hiddenName: 'depId',
emptyText : "请选择部门",
mode: 'local',
store :new Ext.data.SimpleStore({
fields: ["depId","depName"],
data: []
}),
editable : false,
allowBlank: false,
triggerAction : "all",
displayField : "depName",
valueField : "depId"
});
}
if(comboShipOption != '[]'){
var ship_opt_fileds = Ext.data.Record.create([
{name: 'shipId', mapping: 0},
{name: 'shipName', mapping: 1}
]);
var ship_combo_proxy = new Ext.data.MemoryProxy(shipOpt);
var ship_query_comboBox = new Ext.form.ComboBox({
id:'shipQueryComboBox',
fieldLabel : 舰船名称,
name: 'shipName',
hiddenName: 'shipId',
emptyText : "请选择舰船",
store :new Ext.data.Store({
reader:new Ext.data.ArrayReader({},ship_opt_fileds),
proxy:ship_combo_proxy
}),
editable : false,
allowBlank: false,
triggerAction : "all",
displayField : "shipName",
valueField : "shipId",
listeners:{
select:function(combo, record,index){
if(dep_query_comboBox != null){
dep_query_comboBox.clearValue();
var select_index = parseInt(this.value);
var dep_arr = new Array();
var deps_options = comboDepOption[select_index];
dep_arr[select_index] = new Array();
var dep_options = deps_options.split("&");
for(var j =0;j < dep_options.length; j++){
var dep_opt_array = new Array();
var dep_option = dep_options[j].split(',');
var dep_option_id = dep_option[0];
var dep_option_name = dep_option[1];
dep_opt_array[0]=dep_option_id;
dep_opt_array[1]=dep_option_name;
dep_arr[select_index][j]=dep_opt_array;
}
dep_query_comboBox.store.loadData(dep_arr[ship_index]);
}
}
}
});
mmQuery_form.add(ship_query_comboBox);
}
mmQuery_form.add(dep_query_comboBox);
mmQuery_form.render('mmFormDiv');
3、JSP测试数据
//动态生成如下格式字符串
<%String shipStr = "[[0,'ship1'],[1,'ship2']]";
String depStr = "11,dep1&22,dep2@33,dep3&44,dep4";%>
- 大小: 15.6 KB
分享到：
相关推荐
EXTJS的ComboBox级联实现是Web应用程序中常见的一种交互方式，尤其在数据表单中用于联动选择。在本文中，我们将深入探讨EXTJS如何实现ComboBox的级联效果，并理解其数据提交VALUE的工作原理。 首先，我们需要创建两...
extJs4 ComboBox 代码组合框实例，ComboBox 各个主要参数详细解释
在ExtJS 3.4.0版本中，多选下拉框（Multiselect Combobox）是一种常见的用户界面组件，用于提供多个选项供用户选择。这个功能增强了标准的单选下拉框，允许用户同时选择多个条目，通常通过复选框实现。在描述中提到...
本文将详细介绍如何使用ExtJS框架设置级联菜单的默认值。首先，需要明白在ExtJS中设置普通控件（如文本框）的默认值相对简单，通常只用一行代码即可完成。然而，对于ComboBox（下拉列表组件）来说，情况就没那么简单...
ComboBoxTree是ExtJS4中的一个自定义组件，它结合了ComboBox（下拉框）和TreePanel（树形面板）的功能。ComboBox通常用于提供一个下拉列表供用户选择，而TreePanel则用于展示层次结构的数据。ComboBoxTree将这两者...
很多网友在问，Extjs4.0 ComboBox如何实现，好在之前用3.x实现过一个三级联动，如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是，3.x中的model:’local’在Extjs4.0中用queryMode: ‘local’来表示，而且在...
当我们将SSH2与ExtJS ComboBox结合使用时，可以创建动态联动的下拉框，实现数据的级联选择，提高用户交互体验。 在SSH2框架中，Struts2负责处理用户的请求和视图展示，Spring则管理应用的业务逻辑和依赖注入，...
ComboboxTree是ExtJS中的一个自定义组件，它扩展了标准的ComboBox组件，增加了树状结构的功能。用户可以在下拉列表中看到一个树形结构，逐级展开节点，选择需要的项。这种组件特别适合于那些需要展示层级关系且允许...
在这个场景中，开发者面临的问题是如何在EXTJS的RowEditor中处理由多个Combobox（下拉框）组成的CompositeField，以便实现级联筛选功能。RowEditor是EXTJS中的一个组件，它允许用户直接在表格行上编辑数据，提供了...
例如，假设我们有三个级联的ComboBox：国家、省份和城市。首先，初始化国家的ComboBox，加载所有国家的数据。当用户选择一个国家后，根据所选国家的ID，通过Ajax请求获取对应的省份数据，然后加载到省份的ComboBox中...
- **Combobox三级联动**：实现级联选择框，用于展示层次关系的数据。 #### 5. 员工管理系统 最后，本章节通过构建一个简单的员工管理系统来综合运用前面所学的知识点。 - **准备工作**：介绍项目开始前所需的准备...
- **Combobox 三级联动**：实现级联选择框的功能。 #### 5. 员工管理系统 - **准备工作**：规划项目结构和所需技术栈。 - **框架的搭建**：配置 Extjs 和后端服务。 - **菜单的实现**：创建导航菜单。 - **实现...
### ExtJS 下拉多选框lovcombo：省份与城市级联选择实现 #### 背景介绍 在软件开发过程中，经常会遇到需要实现省份、城市等地理位置信息的级联选择功能的需求。对于前端开发者而言，如何高效地实现这一功能成为了...
这个宽度可以级联到字段集内的子容器，确保一致的外观。 - **layout**：定义字段集的布局方式，默认为`form`布局，即垂直排列的表单项。 #### 三、Ext.form.DateField 控件属性 **Ext.form.DateField** 提供了日期...
4.4.7. 露一小手，组合上面所知，省市县三级级联。哈哈~ 4.4.7.1. 先做一个模拟的，所有数据都在本地 4.4.7.2. 再做一个有后台的，需要放在服务器上咯 4.5. 把form里的那些控件全部拿出来看看 4.6. form提交数据的...
4.4.7. 露一小手，组合上面所知，省市县三级级联。哈哈~ 4.4.7.1. 先做一个模拟的，所有数据都在本地 4.4.7.2. 再做一个有后台的，需要放在服务器上咯 4.5. 把form里的那些控件全部拿出来看看 4.6. form提交数据的...