ExtJS 기초강좌 11 - 윈도우(Window) 컴포넌트 출력 및 제어해보기

ExtJS 2015. 6. 12. 09:00

이번에 진행할 강좌는 ExtJS에서 제공하는 Window 컴포넌트입니다.

흔히 모달창 또는 레이어팝업으로 불리우고 있습니다.

ExtJS의 윈도우컴포넌트를 이용하여 레이어팝업을 띄워보도록 하겠습니다.

▶ 샘플코드


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

▶ 실행결과

빈껍데기의 윈도우창이 출력되었습니다.

하지만, 현재 autoShow config 속성을 true로 주었기때문에 항상 load 후에 자동으로 화면중앙에 출력이 됩니다.

autoShow 속성을 false로 주고 (선언하지 않을시 default : false)

패널에 버튼을 생성하여 클릭이벤트 발생 후, 윈도우 창을 띄워보도록 하겠습니다.

▶ 샘플 코드


Ext.onReady(function(){
	//생성되었지만 화면에는 보이지 않는 윈도우 컴포넌트를 winObject에 담아준다.
	var winObject = Ext.create('Ext.window.Window',{
							width : 300,
							height : 200,
							autoShow : false
						});
	
	Ext.create('Ext.Panel',{
		width : 400,
		height : 400,
		title : 'Panel',
		items : [{
			xtype : 'button',
			text : 'Click',
			handler : function(){
				//클릭이벤트 발생시, winObject에 담긴 윈도우 객체를 보여준다
				winObject.show();
			}
		}],
		renderTo : Ext.getBody()
	})
	
})

▶ 실행결과

[초기화면]

[버튼클릭]

실행결과 버튼 클릭시 handler 속성에서 윈도우 컴포넌트의 show() 메서드를 이용해서 윈도우창을 화면에 띄우는 샘플링을 작성해보았습니다.

그럼 이제 상단 샘플 코드에서 몇가지 config 속성들을 이용하여 조금 멋진 윈도우창을 생성해보도록 하겠습니다.

▶ 샘플코드


Ext.onReady(function(){
	//생성되었지만 화면에는 보이지 않는 윈도우 컴포넌트를 winObject에 담아준다.
	var winObject = Ext.create('Ext.window.Window',{
							width : 300,
							height : 200,
							autoShow : false,
							maximizable : true,
							modal : true,
							title : 'Windows Title',
							html : '<h1>Windows Body</h1>'
						});
	
	Ext.create('Ext.Panel',{
		width : 400,
		height : 400,
		title : 'Panel',
		items : [{
			xtype : 'button',
			text : 'Click',
			handler : function(){
				//클릭이벤트 발생시, winObject에 담긴 윈도우 객체를 보여준다
				winObject.show();
			}
		}],
		renderTo : Ext.getBody()
	})
})

▶ 실행결과