nexacro : 동적 콤보

김선미·2022년 12월 30일

동적 콤보

playnexacro 홈페이지에서 찾은 자료를 보며 동적 콤보를 구현하였다.
스크립트 로직은 다 이해하지 못했지만 변수명과 설정을 바꿔주니 바로 적용되었다.
내가 생성할 것은 첫번째 콤보에서 국가를 선택하면 두번째 콤보에 해당 국가의 도시가 생성되는 것이다.

참고 자료 : https://www.playnexacro.com/#show:techtip:897

  • 콤보 생성
  • 데이터셋 작성
    • user_country, user_city, dataset00 총 세개의 데이터셋을 작성하였다.
  • 참고자료의 스크립트(메소드)를 붙여넣기하고, 내 프로젝트에 맞게 수정하여 사용한다.
    • 스크립트 변경 : form_onload에서 form 이름 변경, 콤보 박스 id 변경
    • form properties - event : onload에 form_onload 메소드 등록
    • combo properties : innerdataset에 "user_country", "user_city" 데이터셋 추가
    • combo properties - binding : value에 "dataset00" 데이터셋 추가
  • 수정된 스크립트
this.grid_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var arrComboList = [this.Div00.form.Combo00, this.Div00.form.Combo01];
	
	this.gfnInitMultiCombo(arrComboList);
};



this.gfnInitMultiCombo = function(arrComboList)
{
	var i;
	var nCount = arrComboList.length; //2
	var objCombo;
	var objChildCombo;
	
	for(i=0;i<nCount;i++)
	{
		objCombo = arrComboList[i]; //i=0
				
		if(i!=nCount-1) //i!=1
		{
			objChildCombo = arrComboList[i+1]; //objchildcombo = arrcombolist[1];
			objCombo.childcombo = objChildCombo; //objcombo의 childcombo 지정
			objCombo.addEventHandler("onitemchanged", this.cmbMultiCombo_onitemchanged, this); //objcombo에 addeventhandler 지정
		}
	}
	
	this.gfnItemChangedMultiCombo(arrComboList[0], "-1"); 
}



this.gfnItemChangedMultiCombo = function(objCombo, sValue)
{
	//하위 콤보 컴포넌트 가져오기
	var objChildCombo = objCombo.childcombo;
	
	//현재 컴포넌트 값 변경
	objCombo.set_value(sValue); //set_value("-1")
	
	//하위 콤보가 있을 경우
	if(objChildCombo!=null)
	{
		//하위 콤보의 InnerDataset 가져오기
		var objDs = objChildCombo.getInnerDataset();
		
		//상위콤보 값을 기준으로 하위콤보 필터링
		objDs.filter("Code.toString().indexOf('"+sValue+"')==0||Code=='-1'");
		
		//콤보 아이템 변경 처리 함수 호출
		this.gfnItemChangedMultiCombo(objChildCombo, "-1");
	}
}



this.cmbMultiCombo_onitemchanged = function(obj:Combo, e:nexacro.ItemChangeEventInfo)
{
	//콤보 아이템 변경 처리 함수 호출
	this.gfnItemChangedMultiCombo(obj, e.postvalue);
}

아무리 변수명을 바꾸고, trace()와 alert()을 사용해 확인을 해보아도 onload 함수가 실행이 안되길래 찾아보니 event에 onload 메소드를 등록해주지 않아서였다.
넥사크로는 직접 해당 컴포넌트에 하나하나 함수와 데이터셋을 설정해줘야 한다는걸 알았다 ㅠ
이제 본격적인 crud를 구현해봐야겠다.

profile
백엔드 개발 공부

0개의 댓글