ExtJS 강좌 - 다이얼로그창을 이용하여 깔끔하게 종류별로 메시지창 띄워보기

이 포스팅에서 다룰 내용은 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 개발로짜