3. Sencha Touch – 데이터 뷰 처리

(1) Ext.data.Store – ajax

Store 객체가 데이터를 관리하기 위해서는 model 과 proxy 를 정의해야만 한다.

Data 가 추가되거나 삭제되면 Store 객체에 반영이 된다.

[예제] ajax 타입 Proxy 와 Myapp.Phone 이라는 모델을 갖는 Store 정의

var phoneStore = Ext.create(“Ext.data.Store”, {
model: “MyApp.Phone”,
proxy: {
type: “ajax”,
url: “05_xml_data.jsp”,
reader: {
type: “xml”,
rootProperty: “phonelist”,
record: “phone”
}
},
autoLoad: true
});

(2) Ext.data.Store – JSONP

Store 객체가 데이터를 관리하기 위해서는 model 과 proxy 를 정의해야만 한다.

Data 가 추가되거나 삭제되면 Store 객체에 반영이 된다.

[예제] JSONP 타입 Proxy 와 Myapp.Phone 이라는 모델을 갖는 Store 정의

– rootProperty: “data” : 어느 부분의 데이터를 읽을 것이다라는 정의 필요

Ext.define(“MyApp.Phone”, {
extend: “Ext.data.Model”,
config: {
fields: [ “pno”, “pname”, “pimage” ]
}
});

var phoneStore = Ext.create(“Ext.data.Store”, {
model: “MyApp.Phone”,
proxy: {
type: “ajax”,
url: “06_json_data.jsp”,
reader: {
type: “json”,
rootProperty: “data”
}
},
autoLoad: true
});

[예제] JSON 데이터 페이지

– rootProperty: “data” : data 필드를 가지고 오겠다.

<%String serverKey = request.getParameter(“serverKey”);%>

<%if(serverKey != null) {%>
<%=serverKey%>(
{
“name”: “phonelist”,
“data”: [
{
“pno”: “p1”,
“pname”: “갤럭시A”,
“pimage”: “phone01.png”
},

(3) Ext.dataview.List – 리스트로 출력하는 UI 객체

dataview.list 를 사용하기 위해서는 Store 가 정의되어 있어야만 한다.

[예제] store 정의

var contactStore = Ext.create(“Ext.data.Store”, {
model: “MyApp.Contact”,
data: [
{ firstName: “용권”, lastName: “신” },
{ firstName: “태희”, lastName: “김” },
{ firstName: “동일”, lastName: “박” },
{ firstName: “수길”, lastName: “김” },
{ firstName: “동원”, lastName: “이” },
{ firstName: “민규”, lastName: “신” },
{ firstName: “춘몽”, lastName: “이” },
{ firstName: “희원”, lastName: “박” }
]
});

[예제] dataview list 출력

– itemTpl : 탬플릿 형태 대로

– store: contactStore,에 저장된 Data 의 수만큼 출력된다.

var contactList = Ext.create(“Ext.dataview.List”, {
store: contactStore,
itemTpl: “<div>{lastName} {firstName}</div>”
});