원본 : 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
});