文档目标：实现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级联实现和数据提交VALUE[文].pdf
extJs4 ComboBox 代码组合框实例，ComboBox 各个主要参数详细解释
ExtJS在修改这样的页面上赋值是很方便的，在正文中1.2.1代码中可以看出，一行代码就可以搞定，但这是对于普通控件而言，如文本框。对于ComboBox可没这么简单...
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选， 附源码。 修复不能多选问题，代码仅供参考
很多网友在问，Extjs4.0 ComboBox如何实现，好在之前用3.x实现过一个三级联动，如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是，3.x中的model:’local’在Extjs4.0中用queryMode: ‘local’来表示，而且在...
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
原因是客户的物料种类非常多，有一千种之多，如果单纯用一个Combobox，那么在实际使用中，很难快速找到一个物料，所以，我使用包含物料分类和物料品牌的两个combobox来组成级联式筛选。问题恰恰出在这儿，如果在...
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提交数据的...
4.4.7. 露一小手，组合上面所知，省市县三级级联。哈哈~ 4.4.7.1. 先做一个模拟的，所有数据都在本地 4.4.7.2. 再做一个有后台的，需要放在服务器上咯 4.5. 把form里的那些控件全部拿出来看看 4.6. form提交数据的...