'XTemplate'에 해당되는 글 1건

  1. 2010.03.03 작지만 강한 DataView 클래스 (2)

개요
  view 클래스는 템플릿 기반 데이터 바인딩을 제공하여 데이터를 사용자 지정 UI 뷰로 생성하기 위한 클래스이다.  1.1 버전에서 제공되던 JsonView는 JSON 데이터를 위한 헬퍼 클래스였으나 3.x로 발전하면서 사라졌고 2.0에서 처음 선보인 DataView는 특정 데이터 포맷에 상관없이 Store를 기반으로 한 뷰 기능으로 더욱 발전하였다. 

  그리고 DataView는 BoxComponent 를 상속받고 있어 레이아웃 객체에 구성요소(Component)로 쉽게 추가할 수 있게 되었고 또한 XTemplate 클래스를 지원하여 더 강력한 템플릿 처리가 가능하다.


구조
var panel = new Ext.Panel({
   configuration options,

   items : new Ext.DataView({ 
      store : new Ext.data.JsonStore({ … })   //데이터를 담은 Store객체
      tpl : new Ext.XTemplate( ‘…’ ),            //사용자 레이아웃 템플릿 객체
      autoHeight : true,
      multiSelect : true,                              //다중 선택 여부
      itemSelector : ‘div.thumb-wrap’,           //선택 모델이 수행될 노드 지정
      emptyText : ‘No images to display’
   })
});

위의 소스는 DataView를 꽉찬 형태로 store 구성옵션에 지정한 JsonStore를 이용해 캐시된 데이터를 tpl 구성옵션에 지정된 사용자 레이아웃 템플릿을 결합하여 Panel을 컴포넌트의 body 영역에 렌더링한다.

DataView 의 기능 중 또 하나의 중요한 것은 내장된(built-in) 선택 모델(Selection model)뿐만 아니라 click, doubleclick, mouseover, mouseout 등을 포함하여 컨테이너의 항목에서 발생하는 일반적인 이벤트를 제공한다.  이러한 특성을 이용하기 하고 어떤 노드에서 실행할 것인지에 대한 결정은 itemSelector 구성옵션을 지정해야 한다.


요약
DataView는 Store를 통해 캐시된 다양한 포맷의 데이터와 Template를 결합하여 사용자 정의 레이아웃을 적용하여 Data를 효과적으로 표시하고 선택 모델을 지원하여 사용자 인터렉션을 위한 매우 유용한 컴포넌트이다. 


예제
 



더 읽기
http://www.extjs.com/deploy/dev/examples/view/data-view.html


신고
Posted by Rhio.kim