extJs ComboBox 캐스케이드

4341 단어
문서 목표: extJs의 ComboBox 연결 실현
    
1. html 코드
     
<body>
 <!--   form  Div-->
<div id="mmFormDiv" style="height: 50px;"></div>
</body>

 
 
2. 자바스크립트 코드
    
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";%>

 
웹 개발일지-1주차 총 정리(1-3~16)
Flask를 사용하여 사용자 인증 Webapp 구축

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage