[ExtJS강좌 4] 윈도우 화면 띄우기!!

오늘은 흔히들 일반 자바스크립트에서 쓰는것처럼 모달창? 레이어팝업을 ExtJS에서 제공하는 

기능을 이용해서 띄워볼 것이다.

윈도우창 역시 다양한 옵션값들이 있으므로 해당 옵션들은 도큐먼트들을 보면서 사용하시길...

예제에서 사용하는 옵션들은 본인들이 주로 사용하는 옵션들 위주로 작성을 하였다.

샘플 예제는 다음과 같다.

Ext.onReady(function(){
	Ext.create("Ext.window.Window",{
		//타이틀명
		title : '레이어윈도우 샘플',
		//레이어팝업 높이
		height:500,
		//레이어팝업 넓이
		width:500,
		//자동으로 띄워주는옵션
		autoShow : true,
		//닫기버튼표출여부
		closable  : true,
		//최대화면버튼표출여부
		maximizable : true,
		//모달창 옵션(true/false)
		//false일경우 단순 레이어 팝
		//true일 경우 뒷단에 있는 버튼등 적용 불
		modal:true,
		//리사이즈 가능옵션(true/false)
		resizable : true,
		//타이틀 위치 정렬 : left,center,right
		titleAlign : 'center',
		//버튼표출해줄 툴바(옵션들)
		bbar: [
	       { xtype: 'button', text: '하단버튼' }
	    ],
	    fbar: [
            { type: 'button', text: '툴바버튼' }
        ],
        lbar: [
            { xtype: 'button', text: '상단버튼' }
        ]
	});	
})

해당 여러 옵션들이 있다.

하지만 대부분 레이어 팝업을 띄워주는 기능은 버튼 클릭등과 같은 이벤트 발생시 띄워주고 

싶을경우 autoShow 옵션은 false로지정해주거나 아예 옵션 설정에서 빼주면 된다.

빼주면 자동으로 뜰수가 없다.

이벤트 발생시 해당 정의된 모달창을 띄워주고 싶다? 그럼 다음과 같이 코딩하면 되겠다.

임시로 화면에 버튼을 생성 후, 클릭 이벤트 발생시 윈도우를 띄워주는 샘플 소스이다.

Ext.onReady(function(){
	Ext.create("Ext.button.Button",{
		text : '버튼',
		renderTo : Ext.getBody(),
		handler : function(){
			openWindow();
		}
	})	
})
function openWindow(){
	win = Ext.create("Ext.window.Window",{
		title : '레이어윈도우 샘플',
		height:500,
		width:500
	});
	win.show();
}

처음에 코딩한 예제랑은 틀리게 window옵션은 모두 제거하고 넓이/높이 옵션만 주었다.

코딩에서 보았듯이 handler : 버튼 클릭이벤트를 지정해주는 옵션이다.

버튼 클릭시 openWindow() 함수를 호출하는데

해당 함수는 window를 create한 후, win변수에 담아서 show()메서드로 화면에 띄워준다.

autoShow옵션은 제거하면 기본적으로 false로 지정을 해주므로 자체적으로는 윈도우 화면이 생성되었으나 화면에서는 보이질 않는 상태이다.

그래서 show()라는 메서드를 통해서 화면에 출력시켜주었다.

무조건 win등과 같은 변수에 담아서 호출을 하지 않고

Ext.create().show(); 형식으로 정의를 해줘도 되지만 편의상 변수에 담아서 show() 메서드를 사용해주었다.

show()메서드 등의 이벤트 관련 메서드는 전에 알려준 extjs에서 제공하는 문서URL에서 window라고 검색후 methods 탭을 보면 확인 할 수 있을 것이다.

영상보고 마무리 !!

끝!!

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!