오랫만에 jquery 글을 올리게 되었다..

ExtJS에 요즘 빠져서 한동안 글을 못올리고 있었는데 메뉴정리하고.... 쿨럭!

오늘은 숨겨져 있는 태그를 보여주거나 현재 화면에 보여지는 태그들을 숨기기와 같은 DISPLAY작업을 해보자 한다.

CSS태그 중에서 

display : block (보여주기)

display : none(숨기기)

와 같은 기능을 하는 놈들이다.

사용함수는

$("").show() / $("").hide()

$("").slideDown() / $("").slideUp()

$("").fadeIn() / $("").fadeOut()

이렇게 세가지를 다뤄보도록 하겠다.

show/hide는 css 옵션중 display의 block/none이랑 같은 기능이고

slideDown/slideUp/fadeIn/fadeOut은 조금 애니메이션 효과가 들어가 있다.

예제로 숨겨져 있는 화면을 select box로 값을 지정 후 값의 구분에 따른 show/slideDown/fadeIn을 주어서 화면에 보여

줘보겠다.

샘플소스 전에 jquery 파일 include 해줘야 하는데 파일을 별도로 다운받지 않으신 분은 외부링크를 include(CDN)해주자(head 태그 내에)

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>

이어서 스크립트 소스부분(head 태그 내에)

$(function(){
		$("#showbtn").click(function(){
			if($("#displayselect").val() == "1") {
				$("#displaydiv").show();
			} else if($("#displayselect").val() == "2") {
				$("#displaydiv").slideDown();
			} else if($("#displayselect").val() == "3") {
				$("#displaydiv").fadeIn();
			}
		});
		$("#hidebtn").click(function(){
			if($("#displayselect").val() == "1") {
				$("#displaydiv").hide();
			} else if($("#displayselect").val() == "2") {
				$("#displaydiv").slideUp();
			} else if($("#displayselect").val() == "3") {
				$("#displaydiv").fadeOut();
			}
		})
})

그리고 샘플링을 위한 html 태그소스(body 태그 내에)

<select id="displayselect">
	<option value="1">show/hide</option>
	<option value="2">slide</option>
	<option value="3">fade</option>
</select>
<input type="button" id="showbtn" value="보여주기">
<input type="button" id="hidebtn" value="숨기기">
<div style="display: none;" id="displaydiv">
	<span>초기 숨겨져 있는 화면1</span>
	<span>초기 숨겨져 있는 화면2</span>
	<span>초기 숨겨져 있는 화면3</span>
	<span>초기 숨겨져 있는 화면4</span>
</div>

요약하자면 

보여주기 관련 함수는 show()/slideDown()/fadeIn()

숨기기 관련함수는 hide()/slideUp()/fadeOut()

을 사용하면 될것이다.

* 대소문자 구분에 유의하고 $(보여주기/숨기기태그).함수() 라는것을 기억하자!!

실행하면 다음화면과 같은 효과를 눈으로 확인하실수 있을겁니다.

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

첫번재 녹화다보니 너무 버벅거리고 혼잣말 하는거 같다 ㅠ

설명한답시고 녹화해서 올렸는데... 설명못하고 단순히 저혼자 타이핑한듯한... 영상으로 올렸네요 ;; 

다음녹화부터는 자세히 설명부터 열심히 준비해서 올리도록 하겠습니다. ㅠㅠ

녹화자 목소리는... 제가 들어도 이상하네요; ㅎㅎㅎ

내용을 요약하면 

grid + store는 패키지라고 생각하면 된다.

그리드 중, 상단 제목을 나타내는것은 columns옵션

json 배열에 text key의 value가 화면에 표출되는 title이 된다.

넓이 지정을 하고 싶다면 flex값을 1부터 높여주면 될테고, 

dataIndex는 그리드의 데이터 리스트의 key값과 맞춰주기 위한 value값이다.

store는 저장공간이라고 생각하면 되는데, 첫번째로 해줘야 할 작업이 fields 옵션에 columns에 정의했던 내용과 일치시켜준다.

일치시켜준 value의 key는 name을 지정하고 columns 의 dataIndex의 value값과 통일 시켜준다.

그외의 데이터타입등 지정해주는 옵션이 있겠지만 추후에 다루도록 해보자!

fields옵션까지 완료 되었으면 이제 데이터들을 넣어보자

data옵션에 넣고자 하는 데이터들을 넣어보자

하단 소스처럼 fields에서 name을 지정해준 value값이 data에서는 key값이 된다. 그리고 그의 value가 화면에 표출되는 데이터들이다.

별도의 ajax 통신없이 페이지 자체적으로 데이터를 넣어준것이므로 proxy : 'memory'라고 주었다.

다음 강좌는 조금더 상세하게 준비해서 올리도록 해야겠다...

샘플링한 grid 예제 코드이다.

 Ext.onReady(function(){
 	Ext.create('Ext.grid.Panel',{
 		renderTo : Ext.getBody(),
 		columns : [
 			{
 				text : '제목1',
 				flex : 1,
 				dataIndex : 'title1'
 			},
 			{
 				text : '제목2',
 				flex : 1,
 				dataIndex : 'title2'
 			}
 		],
 		store : Ext.create('Ext.data.Store',{
 			fields : [
	 			{
	 				name : 'title1'
	 			},
	 			{
	 				name : 'title2'
	 			}
 			],
 			data : [
	 			{
	 				title1 : '첫번째 값',
	 				title2 : '두번째 값'
	 			}
 			],
 			proxy : {
 				type : 'memory'
 			}
 			
 		})
 	})
 })

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

자바스크립트에서는 replace 함수를 제공하지만 replaceall함수는 없는걸로 알고 있다.

replace함수는 전제 문자열에서 특정 문자 여러개를 변경하지는 않는다.

only one!! 

replaceall 함수를 한번 만들고 사용해보자

window.onload = function(){
	var str = "2013-01-02";
        alert("변경전 문자:"+str);
	str = replaceall(str,"-","");
	alert("변경후 문자:"+str);
};
function replaceall(fullStr,originalStr,changeStr){
   return  fullStr.split(originalStr).join(changeStr);
}

해당 소스를 스크립트 코드안에 넣어봐서 돌려보시면 이해가 가실겁니다.

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

흔히 자바스크립트에서 다음과 같은 경고창들을 많이 띄워줬을 것이다.

alert("경고창"),confirm("컨펌창") 과 같은 경고창을 흔히들 많이 띄워봤을 것이다.

프롬프트 다이얼로그도 있지만 해당 부분은 자주 쓰는 다이얼로그가 아니므로 건너 뛰도록 

하겠다.

넣어주는 동시에 다이얼로그 창에 옵션을 줘서 아이콘들도 넣어보자!! 

기본 alert 창은 전에 1장에서 hello world 예제를 띄워봤을때 한번 접해봤었다.

기억 안나시는 분들을 위하여!

Ext.Msg.alert('타이틀영역', '헬로우 월드')

alert메시지와 비슷한대 좀더 RIA스럽다~ *-_-*

자 이제 icon을 넣어보고 버튼 옵션들을 변경하면서 테스트 해보자

우선 기본적인 틀은

Ext.Msg.show({

});

함수다

Ext.Msg.alert는 내부에 타이틀,내용이 들어갔었다.

그러나, Ext.Msg.show는 할경우 옵션값들은

title, msg, icon, buttons들이 있다

title : '경고창 상단 타이틀 내용'

msg : '경고창에 뿌려줄 내용;

icon : '경고창에 표출해줄 아이콘'

icon에 들어갈 상수값

Ext.Msg.ERROR

Ext.Msg.INFO,

Ext.Msg.QUESTION,

Ext.Msg.WARNING

buttons : 확인버튼, 확인/취소 버튼 등 ..

buttons에 들어갈 상수값

Ext.Msg.CANCEL

Ext.Msg.OK

Ext.Msg.YESNO

Ext.Msg.YESNOCANCEL

있다.

위에 상수값중에서 일부만 적용해서 화면에 출력해보겠다

본인이 출력할 다이얼로그 창은 alert/confirm이랑 같은 화면을 띄워보도록 하겠다

나머지 옵션들은 바꿔가면서 눈으로 확인해 보시길..

//1. alert("얼랏메시지") 와 같은 화면
Ext.onReady(function(){
	Ext.Msg.show({
		title : 'alert',
		msg : '얼랏메시지',
		icon : Ext.Msg.INFO,
		buttons : Ext.Msg.OK
	});
});
//2. confirm("컨펌메시지")와 같은 화면
Ext.onReady(function(){
         Ext.Msg.show({
		title : 'confirm',
		msg : '컨펌메시지',
		icon : Ext.Msg.QUESTION,
		buttons : Ext.Msg.YESNO
	});
});

1번,2번을 번갈아 가면서 소스적용을 하면서 띄워보자 

오늘은 흔히들 일반 자바스크립트에서 쓰는것처럼 모달창? 레이어팝업을 ExtJS에서 제공하는 

기능을 이용해서 띄워볼 것이다.

윈도우창 역시 다양한 옵션값들이 있으므로 해당 옵션들은 도큐먼트들을 보면서 사용하시길...

예제에서 사용하는 옵션들은 본인들이 주로 사용하는 옵션들 위주로 작성을 하였다.

샘플 예제는 다음과 같다.

Ext.onReady(function(){
	Ext.create("Ext.window.Window",{
		//타이틀명
		title : '레이어윈도우 샘플',
		//레이어팝업 높이
		height:500,
		//레이어팝업 넓이
		width:500,
		//자동으로 띄워주는옵션
		autoShow : true,
		//닫기버튼표출여부
		closable  : true,
		//최대화면버튼표출여부
		maximizable : true,
		//모달창 옵션(true/false)
		//false일경우 단순 레이어 팝
		//true일 경우 뒷단에 있는 버튼등 적용 불
		modal:true,
		//리사이즈 가능옵션(true/false)
		resizable : true,
		//타이틀 위치 정렬 : left,center,right
		titleAlign : 'center',
		//버튼표출해줄 툴바(옵션들)
		bbar: [
	       { xtype: 'button', text: '하단버튼' }
	    ],
	    fbar: [
            { type: 'button', text: '툴바버튼' }
        ],
        lbar: [
            { xtype: 'button', text: '상단버튼' }
        ]
	});	
})

해당 여러 옵션들이 있다.

하지만 대부분 레이어 팝업을 띄워주는 기능은 버튼 클릭등과 같은 이벤트 발생시 띄워주고 

싶을경우 autoShow 옵션은 false로지정해주거나 아예 옵션 설정에서 빼주면 된다.

빼주면 자동으로 뜰수가 없다.

이벤트 발생시 해당 정의된 모달창을 띄워주고 싶다? 그럼 다음과 같이 코딩하면 되겠다.

임시로 화면에 버튼을 생성 후, 클릭 이벤트 발생시 윈도우를 띄워주는 샘플 소스이다.

Ext.onReady(function(){
	Ext.create("Ext.button.Button",{
		text : '버튼',
		renderTo : Ext.getBody(),
		handler : function(){
			openWindow();
		}
	})	
})
function openWindow(){
	win = Ext.create("Ext.window.Window",{
		title : '레이어윈도우 샘플',
		height:500,
		width:500
	});
	win.show();
}

처음에 코딩한 예제랑은 틀리게 window옵션은 모두 제거하고 넓이/높이 옵션만 주었다.

코딩에서 보았듯이 handler : 버튼 클릭이벤트를 지정해주는 옵션이다.

버튼 클릭시 openWindow() 함수를 호출하는데

해당 함수는 window를 create한 후, win변수에 담아서 show()메서드로 화면에 띄워준다.

autoShow옵션은 제거하면 기본적으로 false로 지정을 해주므로 자체적으로는 윈도우 화면이 생성되었으나 화면에서는 보이질 않는 상태이다.

그래서 show()라는 메서드를 통해서 화면에 출력시켜주었다.

무조건 win등과 같은 변수에 담아서 호출을 하지 않고

Ext.create().show(); 형식으로 정의를 해줘도 되지만 편의상 변수에 담아서 show() 메서드를 사용해주었다.

show()메서드 등의 이벤트 관련 메서드는 전에 알려준 extjs에서 제공하는 문서URL에서 window라고 검색후 methods 탭을 보면 확인 할 수 있을 것이다.

영상보고 마무리 !!

끝!!

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!