[Nexacro] Container 컴포넌트 - PopupDiv 예제 모음

- 하나의 화면을 여러 개의 부분화면으로 구성.

- Div/PopupDiv에 다른 화면을 연결하여 사용 가능

- 구조: Div/PopupDiv 컴포넌트 안에 innerform이라는 내부 Form 객체로 구성.

 

* popupDiv 오픈하는 방법: trackPopupByComponent

* popupDiv 닫는 방법: 영역 밖 클릭 / popupdiv.closePopup();

 

ex) Contents로 구성된 popupDiv를 버튼 하단에 오픈

var nX = 0;
var nY = obj.height; // 기준을 버튼 높이만큼 이동.
this.popupDiv.trackPopupByComponent(this.btn, nX, nY); // 띄울 기준, x좌표, y좌표

 

ex) Linked Form으로 구성된 popupDiv를 버튼 하단에 오픈

var nX = parseInt(0);
var nY = parseInt(obj.height);
this.popupDiv.trackPopupByComponent(obj, nX, nY, null, null, "fn_pDivCallback");
// 뒤 세 인자: width, height, callback 
// callback 함수 통해서 값 전달받을 수 있음.

 

ex) popupDiv를 이용해 기간 달력 기능 구현

(달력 아이콘 클릭시 폼 열어주기, default 값을 달력에 초기값으로 세팅, 달력서 선택한 날짜를 텍스트 값으로 설정.

 

this.cal_ondropdown = function(obj:nexacro.Calendar, e:nexacro.EventInfo) {
	this.popupdiv.form.cal_form.set_value(this.cal_form.value);
    this.popupdiv.form.cal_to.set_value(this.cal_to.value);
    this.popupdiv.trackPopupByComponent(this,cal_from, 0, obj.height);
};

// 달력 날짜 선택 후 클릭하는 버튼
this.popupdiv_btn_confirm_onclick = function(obj:nexacro.Button, e:nexacro.ClickEventinfo) {
	 var sFrom = this.popupdiv.form.cal_from.value;
     var sTo = this.popupdiv.form.cal_to.value;
     
     this.cal_from.set_value(sFrom);
     this.cal_to.set_value(sTo);
     this.popupdiv.closePopup();
 };
 
 // 닫기 버튼
 this.popupdiv_btn_cancel_onclick = function(obj:nexacro.Button, e:nexacro.ClickEventInfo) {
 	this.popupdiv.closePopup();
};

// 날짜 유효성 검사(뒤 날짜 > 앞 날짜)
this.popupdiv_oncloseup = function(obj:nexacro.PopupDiv, e:nexacro.EventInfo) {
	if(this.cal_from.value > this.cal_to.value) {
    	this.alert("End Date should be later than From date");
        this.cal_to.set_value("");
};