ExtJS 강좌 - DATAVIEW를 이용하여 데이터 목록 출력해보기

이번 포스팅은 ExtJS에서 제공하는 데이터뷰(DATAVIEW)를 이용하여 

기본적인 리스트 출력을 해보도록 하겠습니다.

dataview 는 사용자가 정의한 템플릿 레이아웃을 출력하고 

그 출력된 데이터를 사용할때 유용한 컴포넌트입니다.

제일먼저 목록출력시 필요한 스타일을 간단하게 꾸며보도록 하겠습니다.

.default { 
  padding: 0 3px 0 3px;
}
	
.item {
    border-width: 1px;
    border-style: solid;
    background-color: blue;
    color: white;
}
	
.over {
	border-width: 2px;
    border-style: dotted;
    background-color: red;
    color: white;
}

a.default_a{
	color: white;
}

위처럼 스타일을 정의하셨다면 

dataview 컴포넌트 출력을 위하여 ExtJS 코드를 작성해보도록 하겠습니다.

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		renderTo : Ext.getBody(),
		title : 'DATAVIEW 샘플코드',
	    items:[
	           {
	        	   //Ext.view.View
	               xtype : 'dataview',
	               tpl: new Ext.XTemplate(
	            		   '<tpl for=".">',
	            		   		'<div class="item">',
	            		   				'<a href="{url}" target="_blank" class="default_a">{title}</a>',
           		   				'</div>',
         		   			'</tpl>'),
	               //기본 클래스 적용
	               cls: 'default',
	               //목록 아이템
	               itemSelector: '.item',
	               overItemCls: 'over',
   	               trackOver : true,
	               store : Ext.create('Ext.data.Store',{
				     	           fields : ['title','url'],
				     	           data: [
				     	                {title:'네이버',url : 'http://www.naver.com'},
				     	                {title:'티스토리',url : 'http://www.tistory.com'},
				     	                {title:'다음', url : 'http://www.daum.net'},
				     	                {title:'구글', url : 'http://www.google.com'}
				     	           ],
				 	 	           proxy: {
				 	 			        type: 'memory'
				 	 			   }
		 	        		})
	           }
	     ]
	});
})

코드설명 전에 실행먼저 해보도록 하겠습니다 ^^

실행결과는 위와 같습니다.

"직접 레이아웃 스타일 잡고 HTML태그 이용해서 사용해도 되는거 아닌가요?"

라고 의문을 가지시는 분들이 계실텐데요

일반적인 html을 사용하셔도 무관하나 이벤트 및 메소드 등 지원되는 기능들이 많으니

 DATAVIEW를 사용하지 않을 이유는 없는거 같습니다.

위 코드에 대해서 필요부분에 대해서 하나씩 설명해보겠습니다.

PANEL 컴포넌트 내부에 xtype이 dataview인 컴포넌트로 목록을 출력 해보았는대요

dataview를 사용하실때는 패키지 개념의 필수로 작성해주어야 하는 속성이 있습니다.

바로 store, tpl, itemSelector 이 3가지는 필수로 선언이 되어야 합니다.

tpl 속성은 "Ext.XTemplate" 클래스를 이용하여 템플릿을 만들어 주기 위해 필요한 속성입니다.

※ 속성에 정의된 코드를 보시면 JSP에서 JSTL을 사용해보셨던 분이시라면 익숙한 구조일거라 생각됩니다.

    바로 C태그의 <c:forEach></c:forEach> 태그와 비슷한 개념입니다.

for문에 "."은 root 데이터를 의미하는것이라 대부분 "." 을 사용하면 되는부분이여서 크게신경안쓰셔도 되며 

내부 적으로 보시면 {url},{title} 처럼 마치 JSP의 EL 태그와 유사한 치환자를 보실 수 있습니다. 

Ext.data.Store 공간내에 담겨있는 데이터를 출력시켜주기위해 데이터스토어의 fields 내에 정의된 값들와 매칭 시켜주면 되겠습니다.

※ JSTL과 같이 IF태그 AND/OR 등도 사용이 가능합니다. 하지만 이번 포스팅에서는 다루지 않도록 하겠습니다.

그리고 필수요소 마지막인 itemSelector라는 속성이 있는데 

이 속성은 이벤트나 메서드와 같은 dataview에서 지원해주는 기능들을 

적용해주기 위한 셀렉터를 의미하는 겁니다.

그외에 cls는 전체 목록에 default로 적용시킬 클래스명을 명시해주면 되겠으며, 

마지막으로 overItemCls속성의 경우는 

dataview 아이템에 mouseover 되었을 경우의 적용시키고자 하는 클래스명을 

작성주시면 되겠습니다.

overItemCls 속성 적용시 trackOver값을 true로 주면 어떤 역할을 하는거 같은대

 확실히 어떤 역할을 하는지는 정확히 모르겠네요;;

저는 단순하게 a 태그에 링크를 걸어서 새창띄워주는 기능을 하였으나 

리스너의 아이템클릭등과 같은 이벤트를 이용하여 사용하시면 되겠습니다.

by 개발로짜