Ext 드롭다운 목록

하나.1 레벨 드롭다운 목록
 
1. 1 레벨 드롭다운 목록 상자 로컬 초기화
 
2단계 그룹은value와text와 자동으로 일치하고value 값을 초기화할 때 해당하는 옵션을 자동으로 선택합니다

items : [{
	xtype : 'combo',
	fieldLabel : ' ',
	id : 'warningLevel',
	store :[[1,'1 '],[2,'2 '],[3,'3 ']],
    width:100,
	value:'',
	triggerAction: "all",
	mode: "local",
	allowBlank:false
}]

 
2. 1 레벨 드롭다운 목록 원격 데이터 가져오기

var libStore = new Ext.data.Store({
	proxy : new Ext.data.HttpProxy({
				url : /searchSmisInstitutionList.do'
			}),
	reader : new Ext.data.JsonReader({
				root : "data"
			}, [{name : "className"}, 
			    {name : "smisInstitutionClassId"}])
});
var libCombo = new omgComboBox({
	store : libStore,
	emptyText : " ",
	editable : false,
	id : "smisInstitutionClassId",
	fieldLabel : " ",
	hiddenName : "smisInstitutionClass.smisInstitutionClassId",
	displayField : "className",
	valueField : "smisInstitutionClassId",
	value : "",
	width : 200,
	triggerAction : "all",
	allowBlank:false,
	mode : "remote"
});

 
주:displayField는 표시된 필드 이름이고valueField는 백그라운드에 제출된 필드 값이고,hiddenName은 백그라운드에 제출된 폼 매개 변수 이름입니다.Editable이true일 경우 드롭다운 목록을 입력할 수 있으며, 일반적으로 검색하는 장소에 적용되며, 백그라운드는 모호한 일치 조회를 해야 합니다.
 
2.2단계 드롭다운 목록
 
 1. 2 레벨 드롭다운 목록 로컬 데이터 초기화

var citys=[
 [' ',[[' '],[' '],[' '],[' '],[' '],[' ']]],				
 [' ',[[' '],[' '],[' '],[' '],[' '],[' ']]],				
 [' ',[[' '],[' '],[' '],[' '],[' ']]]
];
//  
var provinceComBo=new Ext.form.ComboBox({
	hiddenName:'province',
	name: 'province_name',
	valueField:"province",
	displayField:"province",
	mode:'local',
	fieldLabel: ' ',
	blankText:' ',
	emptyText:' ',
	editable:false,
	anchor:'90%',
	forceSelection:true,
	triggerAction:'all',
	store:new Ext.data.SimpleStore(
		{
			fields: ["province","city"],
			data:citys,
			sortInfo:{field:'province'}
		}
	),
	listeners:{
		select:function(combo, record, index){
		cityCombo.clearValue();
		cityCombo.store.loadData(record.data.city);
		}
	}
});
//  			
var cityCombo=new Ext.form.ComboBox({
	hiddenName:'city',
	name:'city_name',
	valueField:"city",
	displayField:"city",
	mode:'local',
	fieldLabel: ' ',
	blankText:' ',
	emptyText:' ', 
	editable:false,
	anchor:'90%',
	forceSelection:true,
	triggerAction:'all',
	store:new Ext.data.SimpleStore(
		{fields: ["city"],
		 data:[],
		 sortInfo:{field:'city'}}),
});

 
2. 2단계 드롭다운 목록 원격 데이터 얻기

//  
Ext.form.regieOrgCombo = Ext.extend(Ext.form.ComboBox,{ 
    displayField: 'regieOrgName',
	valueField: 'regieOrgCode',
	triggerAction: 'all', 
	mode:'local',
	emptyText: ' ',
	editable:false,
    selectOnFocus:true,
	store: new Ext.data.Store({
	proxy: new Ext.data.DWRProxy(
			rmRegieOrgService.getRmRegieOrgByPersonCode),
	reader: new Ext.data.ListRangeReader({
	    totalProperty: 'totalCount',
	    root: 'items',
	    id:'regieOrgCode'},
	    new Ext.data.Record.create([
            {name: 'regieOrgCode', mapping: 'regieOrgCode'},
            {name: 'regieOrgName',mapping: 'regieOrgName'}
	    ])
    )
	})	
});
//  
Ext.form.regieOrgDeptCombo =  Ext.extend(Ext.form.ComboBox,{ 
    displayField: 'regieDeptName',
	valueField: 'regieDeptCode',
	triggerAction: 'all', 
	mode:'local',
	emptyText: ' ',
	editable:false,
    selectOnFocus:true,
	store: new Ext.data.Store({
	proxy: new Ext.data.DWRProxy(
			rmRegieDeptService.getRmRegieDeptByRegieOrgCode),
	reader: new Ext.data.ListRangeReader({
	    totalProperty: 'totalCount',
	    root: 'items',
	    id:'regieDeptCode'},
	    new Ext.data.Record.create([
		   {name: 'regieDeptCode', mapping: 'regieDeptCode'},
		   {name: 'regieDeptName',mapping: 'regieDeptName'}
		])
		)
	})		  
 });
//  
var regieOrgCombo = new Ext.form.regieOrgCombo({
	fieldLabel:' ',
	width: 100,
	listWidth:150,
	id:'regieOrgCombo'
}); 
//  ， 。
regieOrgCombo.addListener('select',
	function(combo, comboRecord, index){
      clearCombo('regieOrgDeptCombo','regieDeptCode');          
      regieOrgDeptCombo.store.reload();             
});
		
// 
var regieOrgDeptCombo = new Ext.form.regieOrgDeptCombo({ 
    id:'regieOrgDeptCombo',
    fieldLabel:' ',
	width: 100	  
}); 
//  
regieOrgDeptCombo.getStore().on('beforeload',function(){
   var regieOrgCode = regieOrgCombo.getValue(); 
   Ext.apply(this.baseParams,{regieOrgCode:regieOrgCode});  
});