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

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

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

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

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

우선은 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 개발로짜

이 포스팅에서 다룰 내용은 Dialog 메시지창 입니다

다룰 내용 : Confirm,Alert,Toast, 사용자정의 메시지창

Prompt Dialog는 제외하였습니다.

Confirm 샘플코드

Ext.onReady(function(){
	 Ext.MessageBox.confirm(
		'Confirm 타이틀' 
		,'Confirm 컨텐츠 메시지입니다.' 
		,function(click_button){
			 if(click_button == "yes") {
				alert("yes click"); 
			 } else {
				 alert("no click");
			 }
	 	} 
		 /*,this */
 	);
})

Confirm창을 출력하기 위해서는 Ext.Message.confirm 함수를 사용합니다.

confirm함수의  각 입력값들에 대한 설명은 하단과 같습니다.

첫번째 param : 메시지 박스의 헤더에 속하는 제목입니다.

두번째 param : 메시지 박스 바디부분에 들어가는 내용입니다.

세번째 param : 버튼 클릭 이벤트 제어입니다.  

                      위에 보시면 function(click_button)과 같이 입력같 하나가 넘어오게 됩니다. 

                      입력값은 yes or no에 대한 값이 나오는데 넘어온 값에 따라 제어를 해주시면 되겠죠?

네번째 param : scope 영역지정이라고 하는거 같은데 이부분은 나중에 컴포넌트 이벤트 예를 들어보면서 다루어 봐야할거 같습니다.

                      scope param은 빼주셔도 이상없이 동작됩니다.

Confirm 코드 실행결과

Alert 샘플코드

Ext.onReady(function(){
	 Ext.MessageBox.alert(
		'Alert 타이틀' 
		,'Alert 컨텐츠 메시지입니다.' 
		,function(click_button){
			alert(click_button);
	 	} 
		 /*,this */
 	);
})

Alert 코드 실행결과

Alert의 경우는 Ext.MessageBox.confirm -> Ext.MessageBox.alert 로 변경만 했을 뿐입니다.

클릭이벤트에서 받아오는 결과값은 confirm의 yes/no -> ok 버튼만 받아옵니다.

Toast 샘플코드

Ext.onReady(function(){
	Ext.toast({
        html: "토스트메시지",
        closable: false
    });
})

Toast란 살짝 나타났다가 사라지는 메시지 창입니다.

안드로이드경우에도 Toast라는 간단한 메시지창을 띄워주는 기능이 있습니다.

Alert과 비슷한 메시지 창이긴 하지만  슬라이드기능으로 스르륵 나타나는 효과를 주는 메시지 창입니다.

옵션여부에 따라서 alert처럼 버튼생성이나 닫기버튼을 줄수 있지만 

Toast 기능은 보통 메시지 전달기능을 위해 만드는것이 좋습니다.

Toast 실행결과

위처럼 스르륵 올라오는 결과를 확인할 수 있습니다.

메시지 출력되는 위치는 변경이 불가능한가요? 

가능합니다.

align 속성을 이용하시면 됩니다.

align 속성을 정의안하게 되면 default : br(bottom right) 위치

 메시지창이 출력되게 되는겁니다.

속성값은 다음과 같습니다.

b : 중앙하단 (bottom)

br : 우측하단(bottom right)

bl : 좌측하단(bottom left)

t : 중앙상단(top)

tr : 우측상단(top right)

tl : 좌측상단(top left)

그럼 각 버튼들을 만들어서 위치에따른 토스트 메시지들을 띄워보도록 해보도록 하겠습니다.

위치별 Toast 코드

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		title : '도화지',
		layout : 'fit',
		renderTo : Ext.getBody(),
		tbar : [{
			xtype : 'button',
			text : '중앙상단',
			handler : function(){
				Ext.toast({
				    html: "토스트메시지(align:t)",
				    align : 't',
				    closable: false,
				    slideInDuration: 400,
				    minWidth: 400
				});
			}
		},{
			xtype : 'button',
			text : '우측상단',
			handler : function(){
				Ext.toast({
				    html: "토스트메시지(align:tr)",
				    align : 'tr',
				    closable: false,
				    slideInDuration: 400,
				    minWidth: 400
				});
			}
		},{
			xtype : 'button',
			text : '좌측상단',
			handler : function(){
				Ext.toast({
				    html: "토스트메시지(align:tl)",
				    align : 'tl',
				    closable: false,
				    slideInDuration: 400,
				    minWidth: 400
				});
			}
		},{
			xtype : 'button',
			text : '중앙하단',
			handler : function(){
				Ext.toast({
				    html: "토스트메시지(align:b)",
				    align : 'b',
				    closable: false,
				    slideInDuration: 400,
				    minWidth: 400
				});
			}
		},{
			xtype : 'button',
			text : '우측하단',
			handler : function(){
				Ext.toast({
				    html: "토스트메시지(align:br)",
				    align : 'br',
				    closable: false,
				    slideInDuration: 400,
				    minWidth: 400
				});
			}
		},{
			xtype : 'button',
			text : '좌측하단',
			handler : function(){
				Ext.toast({
				    html: "토스트메시지(align:bl)",
				    align : 'bl',
				    closable: false,
				    slideInDuration: 400,
				    minWidth: 400
				});
			}
		}]
	})
})

위치별 Toast 실행결과

화면 표시가 조금 지저분 하긴 하지만 각버튼별 클릭시 

출력된 토스트 메시지창과 연결을 지어봤습니다.

애니메이션 효과가 훌륭합니다 아주~

마지막으로 메시지창을 원하는 텍스트 및 아이콘 변경이 가능합니다. 

사용자정의 메시지창이라고 하겠습니다.

적용하게 된다면 

버튼갯수/문구/ 아이콘표시 등 다양하게 변경이 가능합니다.

우선적으로 아이콘변경을 먼저 해보도록 하겠습니다. 

위처럼 네모친 아이콘을 변경하는 것입니다.

ExtJS에서 지원하는 아이콘을 이용하여 변경해보도록 하겠습니다.

아이콘 변경 코드

Ext.onReady(function(){
	Ext.MessageBox.show({
        title: '타이틀', 
        msg: '메시지내용',
        //버튼정의
        buttons: Ext.MessageBox.OK,
        //아이콘정의
        icon : Ext.MessageBox.WARNING
    });
})

위 코드에서 icon에 지원속성을 다음처럼 4종류를 기본적으로 제공합니다.

Ext.MessageBox.QUESTION

Ext.MessageBox.INFO

Ext.MessageBox.ERROR

Ext.MessageBox.WARNING

위와같이 4가지를 지원하는데 아마 사용자가 만든 이미지도 적용이 가능할 것입니다.

상수와 같은 개념으로 ExtJS에서는 제공을 하는 모양입니다.

아이콘 실행결과

아이콘 모양은 테마별로도 다르지만 사용법은 동일 합니다 ^^

icon 속성을 제외하면 아이콘출력은 별도로 되지 않습니다.

다음은 버튼종류들을 변경해보도록 하겠습니다.

마찬가지로 ExtJS에서 제공하는 버튼의 종류는 7가지가 나와있네요.

buttons 속성이 있는데 이부분을 원하는대로 변경해주시면 되겠습니다.

Ext.MessageBox.OK

Ext.MessageBox.YES

Ext.MessageBox.NO

Ext.MessageBox.CANCEL

Ext.MessageBox.OKCANCEL

Ext.MessageBox.YESNO

Ext.MessageBox.YESNOCANCEL

실행 결과는 다음과 같습니다

마지막으로 위 실행버튼 문구를 변경해보도록 하겠습니다.

OK/Cancel/Yes/No 이 문구 말고 한글로 변경을 원하시는 분들이 

계신다고 가정하여 설명드리겠습니다.

buttonText 라는 속성을 사용하면 변경이 가능합니다.

다이얼로그에 최대 4개의 버튼 적용이 되는거 같습니다

보통 사용되는 버튼수는 1~2개정도일듯...

buttonText : {
       	   ok : '확인',
       	   no : '아니요',
       	   cancel : '취소',
       	   yes : '네'
}

출력하고자 하는 갯수나 버튼값에 대해서는 원하시는대롤 변경해주시면 되겠습니다.

정의해주게 된다면 buttons속성은 필요가 없겠죠? ㅎㅎ

이번장은 이걸로 마치도록 하겠습니다.

원하시는대로 경고창을 만들어보도록 하세요~!

by 개발로짜

지난 포스팅에 간단하게나마 버튼 컴포넌트를 툴바에 생성하여 

클릭이벤트 발생시키는 방법까지 알아보았습니다.

2014/10/21 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 툴바위치 및 버튼 클릭 이벤트 알아보기

이번에는 다양한 버튼컴포넌트의 종류를 알아보도록 하겠습니다.

이 포스팅에서 위처럼 사이즈별/토글/메뉴/그룹버튼의 종류를 다뤄보도록 하겠습니다.

컴포넌트를 그리기위해서는 도화지가 필요하겠죠? 

패널도화지를 이용하여 각각의 버튼을 생성해보도록 하겠습니다.

사이즈별 버튼 생성하기

패널 도화지에 다음과 같이 사이즈별 버튼컴포넌트를 만들어주는 코드를 작성해보았습니다.

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width : 500,
		height : 100,
		title : '사이즈별 버튼',
		//도화지를 그려놓을 위치(Ext.getBody()의미 : body태그내에 그린다)
		renderTo : Ext.getBody(),
		items : [{
	    	xtype : 'button',
	    	text : '기본버튼'
	    },{
	    	xtype : 'button',
	    	text : '중간버튼',
	    	scale : 'medium'
	    },{
	    	xtype : 'button',
	    	text : '큰버튼',
	    	scale : 'large'
	    }]
	});
})

설명전 실행결과를 먼저 보시도록 하겠습니다.

사이즈별 버튼 실행결과

위처럼 3가지 버튼이 출력되었습니다.

원하고자 하는 사이즈별 버튼을 사용하고자 할경우 

scale이라는 속성을 xtype이 'button'과 동일한 레벨에 

작성을 해주시면 되겠습니다.

기본버튼 같은경우는 별다른 사이즈 속성값이 없습니다.

기본버튼보다 큰 사이즈들이 영문처럼 medium(중간), large(크게) 값을 scale 속성에 정의해주시면 되겠습니다.

다음으로는 토글버튼에 대하여 설명드리겠습니다.

토글버튼 생성하기

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width : 500,
		height : 100,
		title : '토글버튼',
		//도화지를 그려놓을 위치(Ext.getBody()의미 : body태그내에 그린다)
		renderTo : Ext.getBody(),
		items : [{
	    	xtype : 'button',
	    	enableToggle : true,
	    	text : '토글버튼'
	    }]
	});
})

어? 뭐지? 

기본 xtype이 button인 속성에 enableToggle 값만 추가로 true를 주었네? 

라고 생각하시겠죠? 

맞습니다. 어렵게 생각하실 필요가 없습니다. 

ExtJS는 조립로봇에 비유하고 싶습니다.

조립로봇의 부품들을 띄어서 설명서대로 조립만 하면 되는것처럼 

ExtJS역시 이미 만들어져있어서 속성에 적용만 잘 하면 원하는 이상의 퍼포먼스가 나는 JS프레임웍입니다.

도큐면서 문서보는 방법에 대해서는 

이후 다루도록 하겠습니다.

기본 컴포넌트에 우선 충실해집시다!!

토글버튼 실행결과

메뉴버튼 생성하기

메뉴버튼은 2가지로 구분이 됩니다.

버튼자체를 클릭하여 메뉴목록을 출력시켜주는 메뉴버튼과 

버튼과 메뉴펼침버튼을 나누어 주는 메뉴버튼으로 구분이 됩니다.

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width : 500,
		height : 100,
		title : '메뉴버튼',
		//도화지를 그려놓을 위치(Ext.getBody()의미 : body태그내에 그린다)
		renderTo : Ext.getBody(),
		items : [{
	    	xtype : 'button',
	    	text : '일반메뉴버튼',
	    	menu: [
	    	    {
	    	    	text : '메뉴1'
	    	    },
	    	    {
	    	    	text : '메뉴2'
	    	    }
	        ]
	    },{
	    	xtype : 'splitbutton',
	    	text : '구분자메뉴버튼',
	    	menu: [
	    	    {
	    	    	text : '메뉴1'
	    	    },
	    	    {
	    	    	text : '메뉴2'
	    	    }
	        ]
	    }]
	});
})

메뉴 목록을 출력시키는 부분은 xtype과 동일한 레벨에 menu 속성에 정의를 해주시면 되겠습니다.

메뉴버튼 코드실행 결과

위사진을 보시면 "일반메뉴버튼"은 전체버튼을 클릭시 메뉴가 드롭다운됩니다. 

하지만 "구분자메뉴버튼" 클릭시 나뉘어져있는 아래로표시된 화살표를 클릭해야 메뉴가 드롭다운이 됩니다.

마지막으로 그룹버튼에 대해서 설명을 드리겠습니다.

그룹버튼 생성하기

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width : 500,
		height : 200,
		title : '그룹버튼',
		//도화지를 그려놓을 위치(Ext.getBody()의미 : body태그내에 그린다)
		renderTo : Ext.getBody(),
		items : [{
	    	xtype : 'segmentedbutton',
	    	items : [{
	    		text : '첫번째버튼'
	    	},{
	    		text : '두번째버튼'
	    	}]
	    }]
	});
})

그룹버튼 실행결과

xtype이 "segmentedbutton" 속성이 그룹버튼을 만들어 주는 타입 입니다.

그룹버튼은 메뉴버튼 만든것과 비슷한 개념이고 구조만 살~짝 다르답니다

메뉴버튼의 경우는 xtype이 button을 주고 같은 레벨에 menu 속성을 지정해주었지만

그룹버튼의경우 xtype이 segmentedbutton을 주고 items로 child node에 button 목록을 여러개 작성해주었습니다.

세로형 그룹버튼을 원하신다면 xtype : 'segmentedbutton' 와 같은 레벨에 추가로 vertical : true 속성을 지정해주시면 되겠습니다.

지금까지 버튼의 종류들을 알아보았습니다.

기능동작은 언제 알아보나요?라고 궁금해하시는분들을 위해서 말씀드립니다.

ExtJS의 JSON구조로 컴포넌트 생성법이 우선이라 생각되어 기능 동작은 이후에 다루도록 하겠습니다.

컴포넌트가 뭐 별거 있나라고 생각하시겠지만 엄청 중요하답니다.

콤마(,)나 괄호닫기([],{}) 등을 실수로 빼먹거나 누락시킬경우 

ExtJS는 대부분 오류로 인식을 시키기 때문에 

JSON 규격으로 컴포넌트를 만드는 습관은 필수입니다.

다음장에는 메시지창(ALERT,CONFIRM)을 포스팅하도록 하겠습니다.

by 개발로짜