본문 바로가기
Nexacro/예제

[Nexacro] Dynamic Creation - 스크립트로 컴포넌트 생성/데이터 바인딩

by bjgu97 2021. 11. 24.
반응형

* 화면 Resize 했을 때 모양(사이즈) 변화..?

Properties > Position > left/right 고정을 통해 변화 줄 수 있음.

 

* 스크립트를 통해 컴포넌트 만들기

(form에 버튼 생성)

var objBtn = new Button(); // 컴포넌트 생성
objBtn.init("btn_Comp", 10, 250, ,150, 50); // init
this.addChild("btn_Comp", objBtn); // 컴포넌트 ID 작성을 통해 Form에 컴포넌트 붙인다.
objBtn.show(); // 화면에 보여준다.

 

(form에 생성한 버튼 삭제)

 var objBtn = this.removeChild("btn_Comp"); // 컴포넌트 이름 부여
objBtn.destroy(); // destroy 하고
objBtn = null // null 처리까지 해야 비로소 삭제됨.

 

(div/tab 컴포넌트에 버튼 생성)

- div/tab에는 위와 같은 방법으로 안됨. div나 PopupDiv, Tab는 중간에 innerform이라는 depth가 있는데 이 단계를 작성해주지 않았기 때문.

- 중간에 'form' 추가해주자

var objDivBtn = new Button();
objDivBtn.init("btn_divComp", 10, 10, 150, 50);
this.div.form.addChild("btn_divComp", objDivBtn); //  depth 추가됨!
objDivBtn.show();

(div/tab 컴포넌트에 생성한 버튼 삭제)

var objBtn = this.div.form.removeChild("btn_divComp"); // depth 추가
objBtn.destroy();
objBtn = null;

 

(이벤트 걸어주기)

if(!this.isValidObject(this.btn_Comp)) {
	this.btn_ex_onclick();
}
this.btn_Comp.addEventHandler("onclick", this.fn_temp, this); // 이벤트 걸어주기: event에 this.fn_temp 연결


// fn_temp 함수
this.fn_temp = function() {
	this.alert("Add Event Hander");
};

 

(데이터셋과 바인딩하기)

- 직접 드래그로 바인딩 하는것을 스크립트로!

var objBindItem = new BindItem();
objBindItem.init("item0", "btn_Comp", "text", "Dataset0", ..) // init
this.addChild("item0" objBindItem);
objBindItem.bind();

 

댓글