이번에 진행할 강좌는 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()
    	})
    })
    
    

    ▶ 실행결과



    Window 컴포넌트에서 추가속성으로 최대화버튼 생성, 모달창, 제목/내용을 담아보았습니다.

    다양한 config들을 이용하여 멋진 윈도우 컴포넌트를 생성 할 수 있을겁니다.


    간략적인 config들을 정리해보았습니다. ▼

    autoShow (default : false)

    윈도우 컴포넌트가 생성될때 자동으로 화면에 보여줄지를 결정

    draggable (default : true)

    윈도우를 브라우저내에서 드래그앤드롭으로 위치 이동이 가능

    resizable (default : true)

    윈도우의 가로/세로 리사이즈 가능

    maximizable : (default : false)

    윈도우를 브라우저 영역내에 가득채우게 하는 최대화 가능

    closeAction (default : 'destroy')  

    윈도우의 닫기버튼 클릭시 동작되는 액션 (destory or hide)

    ※ destroy 일경우 다시 create를 해주어야 하고, hide일 경우 show() 메서드로 보여주는것이 가능

    modal (default : false)

    윈도우를 모달창 출력

    animateTarget (default : null)

    윈도우가 오픈되는 동안 포커스가 되는 타겟 (id or element)


    윈도우는 이걸로 간단하게 마무리하도록 하겠습니다.

    그외의 필요 기능들은 API 문서를 찾아보세요.




    Posted by 몽고