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

번역본 : http://sencha.or.kr/wp-admin/post-new.php

센차터치는 항목의 인덱스 스타일 리스트를 표시하기위한 리스트 구성 요소를 제공합니다. 이 튜토리얼에서, 우리는 기본 목록을 설정하는 과정을 안내하고, 마커에서 함께 인덱스 바  및 그룹 항목을 추가하는 방법을 보여줍니다. 우리는 또한 어떻게 각 목록 항목에 대한 정보를 공개하는 세부 사항 패널을 만드는 방법을 보여줍니다.

(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.)

 

이 튜토리얼은 센차 터치에 내장 된 새로운 NavigationView와 MVC 지원을 제공합니다

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

 

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

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

 

가이드(Guide)

스토어 페이지에서 항목을 목록으로 만드는 요소입니다 . 목록의 DataView 서브클래스에 그 기능을 대부분 제공합니다 ( DataView 가이드 ). 그러나 리스트는 자신의 다음과 같은 기능을 추가합니다 :

(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:)

 

Ext.create('Ext.List', {
    store: {
        fields: ['name'],
        data: [
            {name: 'Cowper'},
            {name: 'Everett'},
            {name: 'University'},
            {name: 'Forest'}
        ]
    },

    itemTpl: '{name}'
});


이 코드 샘플은 스토어에서 하나의 데이터항목을 각각의 항목을 위해 가져온다. 또한 다음과 같은 코드에 의해, 목록에 이벤트 리스너를 부착 할 수 있습니다 :

(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:)

 

Ext.create('Ext.List', {
    listeners: {
        select: function(view, record) {
            Ext.Msg.alert('Selected!', 'You selected ' + record.get('name'));
        }
    }

    // store and itemConfig as before
});