[실무 경험담] 넥사크로(Nexacro)에서 팝업 창 생성, 닫는 방법(부모 창에서 자식 창으로 데이터 넘겨주기까지)

안녕하세요. IT Window 킷도우입니다.

오늘 새벽 2022 카타르 월드컵 아르헨티나가 우승하면서 메시는 엄청난 기록을 세웠네요!

아마 역대 최고의 축구 선수로 남지 않을까 생각이 되고 그 영광적인 순간을 같이 봤다는게 기쁘네요. ㅎㅎ

 

오늘 여러 분들에게 설명드릴 글은 바로 넥사크로(Nexacro N)에서 팝업 창을 생성하는 방법인데요.

팝업 창을 생성하면서 설정해주는 옵션들을 설명드리고 마지막으로 팝업이 닫히면서 후처리하는 로직까지 살펴 보도록 하겠습니다.

 

그럼 바로 본론으로 들어가겠습니다.

 

설명에 앞서 이해를 돕기 위해 예시 상황을 세워보겠습니다. 아래와 같은 게시판 화면이 있다고 해 봅시다.

주문 게시판 화면 (넥사크로 팝업 오픈 예시를 위한 이미지)

그리드에서 주문건 1건을 클릭하여 "주문 수정" 버튼을 클릭 했을 때 아래 이미지처럼 팝업 창을 띄우는 작업을 해 보겠습니다.

팝업 이미지 예시

반응형

1. 넥사크로(Nexacro)에서 팝업 창 생성하는 방법

 

위 주문 게시판 화면에서 주문 수정 버튼을 클릭 했을 때 팝업이 열리도록 개발해줘야 합니다. 따라서 버튼의 onclick이벤트를 걸고 해당 함수 안에 팝업이 열리는 소스를 아래와 같이 개발해주면 됩니다. 

결론부터 말씀드리면 gfnOpenPopup이라는 공통 함수를 쓰면 팝업이 열리고, 이 함수에 매개 변수로 전달하기 위한 옵션 인자들을 코딩해주면 됩니다. 간단하죠?

this.btn_updOrd_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//alert("주문 수정 팝업 오픈");
    	//선택한 그리드에서 주문번호 값 가져오기
	var ordNo = this.ds_list.getColumn(this.ds_list.rowposition,"ORD_NO");
	
	var oArg = {ordNo:ordNo}; //부모창(주문게시판)에서 자식창(팝업창)으로 ordNo 매개변수 전달하기
	var oOption = {}; //top = 20, left =370 이런식으로 위치 지정 가능
                        //top,left를 지정하지 않으면 팝업이 자동으로 화면 정 가운데 위치합니다.
	var sPopupCallBack = "fnPopupCallback"; //팝업창을 닫을 때 후처리 로직 작성하기 위한 함수를 지정한다.
	this.gfnOpenPopup("popup","Board::OB_001_02.xfdl",oArg,sPopupCallBack,oOption);
    	//"popup" : 팝업을 구분하기 위한 ID 지정
    	//"Board::OB_001_02.xfdl" : 팝업을 오픈할 때 보여줄 화면 경로
};

네 이렇게 하면 팝업이 열리게 됩니다. 그럼 이 코딩에서 전달한 ordNo값을 자식 창(팝업 창)에서 정상적으로 값을 가져오는지 확인 해볼까요? OB_001_02.xfdl (팝업 창, 자식 창) 화면이 onload될 때 부모창에서 전달한 ordNo값을 알럿으로 띄우도록 개발해 보겠습니다.

this.OB_001_02_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	alert("부모창(주문게시판)에서 넘겨준 값 : " + this.getOwnerFrame().ordNo);
};

네 이렇게 코딩하면 되고 보시는 것처럼 부모창에서 값을 가져올 땐 this.getOwnerFrame()함수를 써 주시면 되겠습니다.

 

2. 넥사크로(Nexacro)에서 팝업 창 닫힌 후 후처리 하는 방법

우리가 넥사크로 팝업을 띄울 때 gfnOpenPopup 함수에 전달한 매개변수에 sPopupCallBack = "fnPopupCallback" 라는 값을 지정해 줬습니다. fnPopupCallback 이름을 가진 함수를 새로 만들고 그 안에 로직을 작성하면 바로 팝업이 닫힌 이후 해당 로직이 동작하게 됩니다.

당연히 이 후처리 로직은 팝업이 닫히고 부모창(주문게시판) 에서 띠워주는 팝업이니 부모창에 코딩해야겠죠?

this.fnPopupCallback = function(strId, strVal)
{
	trace(" strId : " + strId + " strVal : " + strVal);
  	switch(strId)
	{
		case "popup" : //gfnPopupOpen 함수 사용시 첫번째 매개변수 
			alert("팝업이 닫히고 나서 실행됩니다"):
		    break;
	}
};

네 이렇게 하면 팝업을 닫을 때 위 alert문구를 확인할 수 있을 겁니다.

 

3. 넥사크로(Nexacro)에서 팝업 창을 닫는 방법

이건 아주 간단합니다. 위 팝업 예시 화면에서 닫기 버튼을 눌렀을 때 this.close()함수가 동작하도록 해주면 되는데요.

this.btn_exit_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//alert("닫기 버튼 클릭");
	this.close();
};

 

네 이렇게 해서 넥사크로 (Nexacro N)에서 팝업 창을 생성하고 닫고 또 부모 창의 데이터를 자식 창으로 전달하는 방법까지 알아 봤습니다. 작은 도움됐길 바라면서 글을 마치겠습니다. 감사합니다.

 

★킷도우 웹 개발 기초 강의가 오픈됐습니다!

궁금하신 분들은 아래 링크를 참고해 주세요~

https://kitdow.tistory.com/31

킷도우의 첫 강의! - 웹 개발 기초 (프론트엔드, 백엔드, DB까지 총 10시간에 걸쳐 주문 게시판 만

감사합니다!