'listview'에 해당되는 글 1건

  1. 2010.03.06 작지만 빠른 ListView 클래스

개요
view 전용 클래스는 DataView외에 Ext.list.ListView도 있다.  DataView는 템플릿 기반 데이터 바인딩을 제공하여 사용자 UI 뷰를 생성하기 위한 클래스인 반면 ListView는 단순한 Grid 형태로 데이터를 나열한다.

ListView는 DataView를 확장하지만 tpl 구성옵션은 없고 대신에 columns 옵션을 가지고 있어 Grid의 columnModel과 비슷하다.


주요 기능
1. 컬럼 크기 조정
2. 열 선택
3. 열 너비는 초기 상태로 컨테이너의 비율로 자동으로 조정됨
4. 어떤 포맷의 데이터라도 렌더링을 위한 템플릿을 사용할 수 있다.
5. 가로 스크롤은 지원되지 않는다.
6. 컬럼 편집이 지원하지 않는다.


구조적 이해

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

   items : new Ext.ListView({
      store : new Ext.data.JsonStore({ … }), //Store 객체
      columns : [ { … }, { … } ], //Column 모델 지정
      autoHeight : true,
      multiSelect : true, //다중 선택 모델 여부
      itemSelector : ‘div.thumb-wrap’, //선택 모델 실행할 노드 지정
      emptyText : ‘No images to display’
   })
});

위의 소스는 DataView와는 대부분 비슷하나 한가지 차이점이 있다.  그것은 사용자 뷰를 생성하기 위한 tpl 옵션이 빠지고 column 옵션이 대체되면서 템플릿 객체의 사용보다 Grid 형태와 같은 빠르고 가벼운 뷰 기능을 제공하는 것이다. 그럼 컬럼을 잠깐 살펴보자.


Column


     columns : [
{ header : 'Product', width : .5, dataIndex : 'title' },
{ header : 'Max Price', width : .15, dataIndex : 'price_max', align: 'center', tpl: '{price_max:usMoney}' },
{ header : 'Min Price', width : .15, dataIndex : 'price_min', align: 'center', tpl: '{price_max:usMoney}' },
{ header : 'Brand', width : .2, dataIndex : 'brand' }
]

컬럼은 객체 배열로 구성되고 다음과 같은 주요 속성을 부여하여 컬럼을 설정할 수 있다.

1. header : Grid에서 표시되는 첫번째 컬럼의 텍스트
2. dataIndex : Store에 저장된 데이터 Record의 필드명
3. width : 컬럼의 너비(0~1 은 백분율, 1 ~ n pixel)
4. align : 컬럼 가로 정렬 (필수는 아님)
5. tpl : 데이터 템플릿 (필수는 아님)


요약
ListView의 경우도 DataView와 마찬가지로 BoxComponent를 상속받기 때문에 레이아웃 객체에 구성요소로 쉽게 추가 할 수 있다.  하지만 이것은 고속의 데이터 뷰를 제공하기 위한 클래스로 템플릿 기능은 제공하지 않는 단순 Grid 형태만을 지원한다.

만약 Grid의 더 많은 고급 기능을 사용하고 싶다면 Ext.grid에 있는 GridPanel 컴포넌트를 사용해야 한다.


예시
 



더 읽기
작지만 강한 DataView 클래스 - http://rhio.tistory.com/352
Ext JS를 이용한 고급 웹 애플리케이션 UI 설계 – Grid, Store 편 - http://rhio.tistory.com/350



신고
Posted by Rhio.kim