extJs ComboBox级联

最新推荐文章于 2017-11-13 10:36:00 发布

mawj0326

最新推荐文章于 2017-11-13 10:36:00 发布

阅读量113

点赞数

分类专栏： jsp extJs 文章标签： extJs之ComboBox联动

本文链接：https://blog.csdn.net/mawj0326/article/details/84272807

版权

jsp 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

extJs

1 篇文章 0 订阅

订阅专栏

文档目标：实现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";%>

mawj0326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录