HW7 : Sencha Touch 2 Model, Store, Proxy, 이용해서 데이터 받아서 List 에 뿌리기

HW7 은, 이전에 배운 것을 바탕으로 List 를 만들어 보는 것입니다.

persons.jsp

등록된 jsp 파일을 아래와 같은 위치에 둡니다.

그리고 해당 데이터를 활용해서 아래와 같이 결과 화면이 나와야 합니다.

(이전 과제를 쭈욱 이어서 하는 것이기 때문에 탭바와 툴바에 버튼들이 있는 것입니다.)

안내!

Sample.view.ModelPanel 이름으로 Panel 을 만듭니다.

xtype 은 modelpanel 로 줍니다.

해당 Panel 의 item 은 Ext.List 를 사용합니다. 정식 명칭은 Ext.dataview.List 입니다. xtype 은 list 입니다.

JSP 에서 보내주는 파일에 맡게 Model 을 정의 합니다.

List 에서 JSP 파일에서 주는 값을 읽어오기 위해 store 속성을 사용합니다.

itemTpl 을 사용해야 합니다. store 에 저장된 각 model instance 들이 화면에 어떻게 나타나야 하는지를 정의 합니다. 검색 요망!!

List item 중 하나를 클릭했을 때 나이가 출력되야 합니다. 아래 화면 참조.

store 내부적으로 proxy 를 사용합니다. 이 때 proxy 는 ajax proxy 여야 합니다.

reader 를 사용합니다.

이 부분 추가가 됐어요!! 과제할 때 참고해주세요!

list 를 쓸 때 store 을 쓰는 방법!! 이렇게도 쓸 수 있습니다!! 

Panel 을 만들고 Panel 의 items 에 list 를 넣는다는 가정하에 아래와 같이 쓸 수 있습니다.

아래는 뼈대 이므로, 과제에서 요구하는 대로 점점점(...) 찍힌 부분에 더 추가를 해 줘야 합니다. 

items: [
	{
		xtype: 'list',
		store: {
			...
			proxy: {
				...
				reader: {
					...
				}
			}
		}
	}
]

그리고 Panel 에 list 를 위의 형식으로 추가할 경우에, 그 Panel 에는 아이템이 list 하나 뿐일 겁니다.

그러므로 이럴 경우 layout 은 어떤 것을 줘야 하는지 잘 생각해보셔야 합니다.