ExtJS 강좌 - 버튼클릭으로 윈도우 모달창 띄워보기

이번에는 클릭이벤트를 이용하여 윈도우 창을 출력하는 포스팅을 다뤄보도록 하겠습니다.

윈도우창은 레이어팝업 혹은 모달이라고 불리우고 있는 패널창입니다.

지난시간에 포스팅한 다이얼로그도 윈도우 창의 일부가 되겠습니다.

윈도우를 띄우는것은 미리 정의되있는 속성만으로도 충분히 훌륭한 화면출력이 가능합니다

버튼클릭이벤트를 이용하여 윈도우 창을  띄워보도록 하겠습니다.

우선은 panel 도화지에 버튼 컴포넌트를 만들어 준 다음 handler 이벤트 정의까지 해보겠습니다

기본 컴포넌트 생성코드

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		renderTo : Ext.getBody(),
		title : 'test',
		width : 300,
		height : 300,
		items : [{
			xtype : 'button',
			text : '윈도우창띄우기',
			handler : function(){
				// window open code here
				// 여기에 윈도우창 띄우는 코드를 작성해보겠습니다.
			}
		}]
	})
})

실행결과

위와같이 기본적인 껍데기를 생성하였습니다.

이제는 윈도우창띄우기 버튼 클릭을 이용하여 윈도우 창을 띄워보도록 하는 코드를 작성해보겠습니다.

하단 코드는 handler 버튼 클릭이벤트에 작성해주시면 되겠습니다.

윈도우창 띄우기 스크립트코드1

var win = Ext.create('Ext.window.Window',{
		width : 300,
		height : 300
             });
win.show();

윈도우창 띄우기 스크립트코드2

Ext.create('Ext.window.Window',{
                autoShow : true,
		width : 300,
		height : 300
             });

위와같이 2가지 방법으로 윈도우창을 출력할 수 있습니다.

물론 출력결과는 동일합니다.

메서드를 이용하느냐 아니면 속성값을 이용하느냐의 차이일 뿐이랍니다.

위처럼 버튼 클릭 후 빈껍데기의 윈도우 창이 출력되는 것을 확인하실 수가 있겠습니다.

이제 window컴포넌트의 속성값을 적용하여 꾸며보도록 해보겠습니다.

간단하게 적용해볼 속성은 다음과 같습니다.

1. 최대버튼생성

2. esc 버튼을 이용하여 창 닫기

3. 윈도우창을 모달을 적용하여 부모창 비활성 시키기

4. 버튼클릭시 애니메이션 기능으로 버튼으로부터 윈도우창 튀어나오는 효과 적용하기

5. 리사이즈제어

6. 드래그앤드롭제어

위에 모든기능들이 속성값들 추가로 인해서 출력이 가능합니다.

윈도우 속성적용된 샘플코드

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		renderTo : Ext.getBody(),
		title : 'test',
		width : 300,
		height : 300,
		items : [{
			xtype : 'button',
			text : '윈도우창띄우기',
			handler : function(btn){
				// window open code here
				// 여기에 윈도우창 띄우는 코드를 작성해보겠습니다.
	   		    Ext.create('Ext.window.Window',{
		   			autoShow : true,
					width : 300,
					height : 300,
					title : '윈도우제목',
					html : '윈도우 몸통에 들어가는 HTML코드',
					//드래그기능제어(true/false)
					draggable : true,
					//윈도우창 리사이즈기능(true/false) 
					resizable : true,
					//브라우저화면을 채우는 기능(true/false)
					maximizable : true,
					//cloasAction을 정의하면 키보드의 esc클릭시 자동 닫힘
					closeAction : 'destroy',
					//모달창으로 부모창비활성(true/false)
					modal : true,
					//윈도우창이 화면에 보여질때 타겟을 지정하게되면 해당 타겟으로부터 나타나는 효과
					animateTarget : btn
			    })
			}
		}]
	})
})

샘플코드 실행결과

위코드의 모든 속성값 적용된 실행코드입니다.

실제로 실행하시면 더 화려한 결과를 보실 수 있으실 겁니다.

윈도우은 별개의 panel 도화지라고 생각하시고 자식컴포넌트들을 생성하실경우 

기존 panel 도화지에서 만드셨던것처럼 동일하게 items내에 정의해주시면 되겠습니다.

by 개발로짜