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

스크롤스파이는 보통 "one page content"에 사용되는 기능입니다.

스크롤을 내릴때마다 타이틀 영역이 변경되면

네비게이션메뉴의 포커스가 

자동으로 이동되는 기능을 의미합니다.

간단하게 메뉴별 컨텐츠내용을 기준으로 코드를 작성 해보도록 하겠습니다.

스크롤스파이를 구현하는방법은 

HTML 태그의 속성값을 지정해주는 방법과 

자바스크립트를 이용한 방법 2가지가 존재합니다.

먼저 HTML 태그 속성값을 이용하여 스크롤스파이기능을 만들어 보도록 하겠습니다.

스크롤스파이 HTML방식

<nav id="menubar" class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">스크롤스파이테스트</a>
        </div>
        <div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#blog_intro">블로그소개</a></li>
            <li><a href="#writer_intro">작성자소개</a></li>
          </ul>
        </div>
</nav>
<div style="margin-top: 100px;">
  <h4 id="blog_intro"><strong>블로그소개</strong></h4>
	<p>
		IT Storage라는 블로그를 소개합니다.<br/>
		10월초에 생성하였으며 구글링을 통한 혹은 프로젝트를 진행하면서<br/>
		자주사용되는 코드를 게시를 하고자 개설을 하게되었습니다.<br/>
		front-end 관련 강좌도 야금야금 진행하고있으니<br/>
		자주 방문해주시면 감사하겠습니다 ^^<br/>
		실시간 포스팅 글을 구독하고자 하시는 분들께서는<br/>
		우측 사이드바에 존재하는 네이버 이웃추가를 통하시면<br/> 
		네이버 로그인시 구독란에서 저의 실시간으로 등록된 글을 확인하실 수 있습니다.<br/>
		남은 포스팅 글들이 아직도 한참 남아서 언제 이글들을 모두 채울까 걱정이네요 ;;<br/>
		신규 포스팅 주제글들도 있긴한대 이부분은 저도 공부를 하고 이해를 하면서 포스팅을<br/> 
		진행할 예정이랍니다 ㅋㅋ<br/>
		많이 방문해주세요
	</p>
  <h4 id="writer_intro"><strong>작성자소개</strong></h4>
  <p>
  	저는 "개발로짜"라는 닉넴을 가지고 블로그 활동을 하는 IT 블로거입니다.<br/>
  	전문 블로거분들처럼 자세한 내용및 블로그를 꾸미는 방법에 대해서는 미흡하나<br/>
  	최대한 시간을 내서 제가 알고 있는 지식선에서 문의주신 질문에 대하여 답변을 드리도록 노력하고있습니다.<br/>
  	항상 열심히 노력하며 발전해나가는 개발자고 되고싶어하는 개발로짜였습니다!!
  </p>
</div>

위 코드에서 추가 <body> 태그에 다음과 같이 속성들을 추가해줍니다.

<body data-spy="scroll" data-target="#menubar">

네비게이션 바에 스크롤 스파이 기능을 넣고자 하는 태그에 data-spy="scroll" 이란 속성을 추가하는겁니다.

추가로 data-spy를 적용한 태그에 data-target="#네비게이션아이디" 혹은 data-target=".클래스" 속성을 추가해줍니다.

위 예제는 화면이 커지면 스크롤 스파이 테스트를 할수 없으므로 브라우저 높이를 줄여서 테스트를 진행합니다.

스크롤스파이실행결과

최초에는 블로그소개에 메뉴바에서 스크롤을 내리니 

작성자내용으로 메뉴포커스가 이동되었습니다.

추가로 jquery 를이용하여 스크롤스파이를 구현해보도록 하겠습니다.

기존 <body>태그에 속성값 2가지를 추가 하셨을겁니다.

이 추가했던 부분들을 삭제한다음 스크립트 코드를 다음과 같이 작성을 해주십니다.

jQuery를 이용한 스크롤스파이 스크립트코드

$(function(){
	$('body').scrollspy({ target: '#menubar' })
})

위처럼 스크립트코드를 추가하면 일반 태그 속성 적용했을때와 동일한 기능이 동작됩니다.

by 개발로짜