원본 : http://docs.sencha.com/touch/2.2.1/#!/guide/list

번역 :  http://sencha.or.kr/?p=1314

번역자 : 컴퓨터공학과 양우현

 

Semcha Touch는 항목들의 인덱스-스타일 리스트를 나타내기 위한 리스트 컴포넌트를 제공합니다.
이 튜토리얼에서는, 기본 리스트를 설정하고 인덱스 바와 그룹 아이템을 마커에 추가하는 방법에 대해 보여드립니다
또한 세부 항목을 생성하여 각각의 리스트 항목을 나타내는 방법을 알려드리겠습니다.

이 튜토리얼은 Sencha Touch에 새로 내장된 NavigationView와 MVC를 포함합니다.

GitHub: http://github.com/senchalearn/Presidents 에서 소스 코드를 볼 수 있습니다.

간단한 리스트 생성하기

고정된 항목을 다음과 같이 렌더링 할 수 있습니다.

이 코드 샘플은 Store에 있는 각 아이템에 대해 하나의 DataItem을 렌더링합니다.
또한 다음과 같이 이벤트 리스너를  리스트에 추가할 수 있습니다.

 

Sencha Touch provides a List component for presenting an index-style list of items. In this tutorial, we walk you through setting up a basic list, and show how to add an index bar and group items together under a marker. We also show you how to create a detail panel to reveal information about each list item.

This tutorial features the new NavigationView and MVC Support built into Sencha Touch.

You can view the source code on GitHub: http://github.com/senchalearn/Presidents

Guide

List is a component that renders a Store as a list of items on the page. List is a subclass of DataView, which provides most of its capabilities (see DataView guide). However, a List adds the following capabilities of its own:

  • Grouping of items, optional index bar, pinned headers
  • Optional disclosure icons on each item
  • Optional icons and labels for each item

Creating a Simple List

You can render a List with static items as follows:

 

This code sample renders one DataItem for each item in the Store. You can also attach listeners to events on the List, as illustrated by the following code