3. Sencha Touch – 데이터 처리
(1) Ext.data.Model
ext.data.model 클래스를 상속받아 클래스를 만들고 fields 값을 지정하여
데이터 구조 형태로 사용할 수 있다
Ext.define(“MyApp.User”, {
extend: “Ext.data.Model”,
config: {
fields: [ “name”, “age”, “phone” ]
}
});
(2) Panel 에서 Ext.XTemplate
Ext.data.model 에 정의된 데이터를 미리 정의된 탬플릿을 활용하여 데이터를
출력할 수 있다.
[예제] 데이터를 출력할 패널 생성
var panel = Ext.create(“Ext.Panel”, {
tpl: template
});
[예제] 탯플릿을 정의
var template = new Ext.XTemplate(
“<div style=’width:100%’>”,
“이름: {name}<br/>”,
“나이: {age}<br/>”,
“전화: {phone}”,
“</div>”
);
[예제] 모델 객체를 그대로 전달
function showUser() {
panel.setData(user.data);
}
(3) Form 에서 Data Model 활용
Ext.data.model 에 정의된 데이터를 미리 정의된 탬플릿을 활용하여 데이터를
출력할 수 있다.
[예제] Data Model 을 정의한다.
Ext.define(“MyApp.User”, {
extend: “Ext.data.Model”,
config: {
fields: [ “name”, “age”, “phone” ]
}
});
[예제] form 에 아이템의 name 값을 data.modle 에 정의한 이름을 맞추어 정의한다.
var formPanel = Ext.create(“Ext.form.Panel”, {
items: [
{xtype:”fieldset”, items:[
{xtype:”textfield”, name:”name”, label:”이름”},
{xtype:”numberfield”, name:”age”, label:”나이”},
{xtype:”textfield”, name:”phone”, label:”전화”}
]}
]
});
[예제] 정의한 Data 모델에 맞추어 객체를 생성
var user = Ext.create(“MyApp.User”, {
name:”홍길동”,
age:35,
phone:”010-123-1234″
});
[예제] 객체를 그대로 setRecord 하면 폼의 데이터가 변경됨
formPanel.setRecord(user);
(4) Proxy -LocalStorage- 데이터 읽기
Ext 에서는 데이터를 통신하기 위한 객체를 Proxy 라고 하여 따로 정의하고 있다.
Proxy 에는 Ajax , JSONP, LocalStorage 등이 포함되는데 브라우져의 로컬데이터와
통신하기 위해서는 LocalStorage 정의하여 사용해야 한다.
– 참조 : http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.LocalStorage
[예제] 프록시 객체 정의 (Proxy 객체를 생성하는데 가지고올 데이터의 ID가 Phone 이라는 것을 명시한다.)
– ?
var localstorageProxy = Ext.create(“Ext.data.proxy.LocalStorage”, {
id: “phone”
});
[예제] 모델 객체 정의 (모델 객체를 정의하면서 프록시 객체를 정의해 준다)
Ext.define(“MyApp.Phone”, {
extend: “Ext.data.Model”,
config: {
fields: [ “id”, “pno”, “pname”, “pimage” ],
proxy: localstorageProxy,
identifier: ‘uuid’
}
});
[예제] MyApp.Phone.load 객체를 사용하여 비동기로 데이터를 읽을 수 있다.
function readData(id) {
MyApp.Phone.load(id, {
success: function(model) {
var phone = model;
panel.setData(phone.data);
},
failure: function() {
Ext.Msg.alert(“알림”, “검색된 데이터가 없음”, Ext.emptyFn);
}
});
};
(4) Proxy -LocalStorage – 데이터 쓰기
Ext 에서는 데이터를 통신하기 위한 객체를 Proxy 라고 하여 따로 정의하고 있다.
Proxy 에는 Ajax , JSONP, LocalStorage 등이 포함되는데 브라우져의 로컬데이터와
통신하기 위해서는 LocalStorage 정의하여 사용해야 한다.
– 참조 : http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.LocalStorage
[예제]identifier: ‘uuid’ 자동 아이디 생성
Ext.define(“MyApp.Phone”, {
extend: “Ext.data.Model”,
config: {
fields: [ “id”, “pno”, “pname”, “pimage” ],
proxy: localstorageProxy,
identifier: ‘uuid’
}
});
[예제] 버튼 클릭시 데이터를 세팅하고 , phone.save를 통해서 저장한다.
var btnCreate = Ext.create(“Ext.Button”, {
text: “생성”,
ui: “confirm”,
handler: function(button, event) {
phone = Ext.create(“MyApp.Phone”, {
pno:”p5″,
pname:”갤럭시New”,
pimage:”phone05.png”
});
phone.save({
success: function(model) {
Ext.Msg.alert(“알림”, “생성 성공”, Ext.emptyFn);
}
});
}
});
[예제] 수정
– phone.save : 수정을 위한 다른 메서드를 지원하지는 않는다
– phone.phantom = false; , phone.setDirty(); 데이터를 수정이라고 세팅함으로써
save 가 세팅으로 동작하도록 한다.
var btnUpdate = Ext.create(“Ext.Button”, {
text: “수정”,
ui: “confirm”,
handler: function(button, event) {
if(phone == null) {
Ext.Msg.alert(“알림”, “생성 후 수정하세요.”, Ext.emptyFn);
} else {
phone.set(“pname”, “갤럭시S2”);
phone.data.pimage = “phone12.png”;
phone.phantom = false;
phone.setDirty();
phone.save({
success: function(model) {
panel.setData(null);
panel.setData(phone.data);
Ext.Msg.alert(“알림”, “수정 성공”, Ext.emptyFn);
}
});
}
}
[예제] 삭제
– earase 메서드를 사용하여 삭제를 한다.
phone.erase({
success: function() {
phone = null;
rootPanel.remove(panel, false);
Ext.Msg.alert(“알림”, “삭제 성공”, Ext.emptyFn);
}
});
(5) Proxy -AJAX – XML
AJAX 방식으로 XML 데이터를 통신하기 위한 Proxty
[예제] Ajax Proxy 를 생성
– tpye : xml
– record: “phone”
– 타겟 페이지는 url 에 정의
var ajaxProxy = Ext.create(“Ext.data.proxy.Ajax”, {
url: “06_xml_data.jsp”,
reader: {
type: “xml”,
record: “phone”
}
});
[예제] XML 셈플
<phone>
<pno>p1</pno>
<pname>갤럭시A</pname>
<pimage>phone01.png</pimage>
</phone>
[예제] Data.Model 생성
– Proxy 자리에 ajax Proxy 를 넣는다.
Ext.define(“MyApp.Phone”, {
extend: “Ext.data.Model”,
config: {
fields: [ “pno”, “pname”, “pimage” ],
proxy: ajaxProxy
}
});
[예제] 데이터 읽기
– LocalStorage 에서는 ID 를 사용했지만 ajax – XML 타입에서는 params: {pno:pno},
를 사용한다.
function readData(pno) {
MyApp.Phone.load(null, {
params: {pno:pno},
success: function(model) {
phone = model;
panel.setData(phone.data);
Ext.Msg.alert(“알림”, “읽기 성공”, Ext.emptyFn);
},
failure: function() {
Ext.Msg.alert(“알림”, “서버 오류 또는 서버 접속 실패”, Ext.emptyFn);
}
});
};
[예제] 타겟 JSP 페이지 모습
– pno 값을 파라메터로 다른 값을 리턴하고 있음
<%String pno = request.getParameter(“pno”);%>
<%if(pno==null || pno.equals(“p1”)) {%>
<phone>
<pno>p1</pno>
<pname>갤럭시A</pname>
<pimage>phone01.png</pimage>
</phone>
<%} else if(pno.equals(“p2”)) {%>
(6) Proxy -AJAX – JSON
AJAX 방식으로 JSON 데이터를 통신하기 위한 Proxty 객체
[예제] 프록시 선언
– Type : Json
– 그 외에는 XML 과 다른 것이 없음
var ajaxProxy = Ext.create(“Ext.data.proxy.Ajax”, {
url: “07_json_data.jsp”,
reader: {
type: “json”
}
});
[예제] 서버 사이드
<%String pno = request.getParameter(“pno”);%>
<%if(pno.equals(“p1”)) {%>
<%–[–%>
{
“pno”: “p1-0”,
“pname”: “갤럭시A”,
“pimage”: “phone01.png”
}
<%–]–%>
<%} else if(pno.equals(“p2”)) {%>
(7) Proxy – JSONP 방식
AJAX 방식으로 JSON 데이터를 통신하기 위한 Proxty 객체
[예제] 서버로 실행될 함수 이름을 알려준다. : callbackKey: “serverKey”,
– 서버로 함수 이름 리턴
– 타겟 페이지는 함수이름을 포함한 데이터를 리턴 ex) abcd(jsondata); 이런 식으로 함수를 호출하는 javascript 를 구성하여 넘겨준다.
– 클리이언트 사이드에서는 abcd 라고 정의된 함수가 실행되게 된다 ….
– 함수명을 주고 받고 하는 부분은 Sencha 에서 알아서 실행해주며 사용자는 load 함수를 사용하여 succes callback 을 받기만 하면됨
var jsonpProxy = Ext.create(“Ext.data.proxy.JsonP”, {
//IP는 여러분에 맞게 수정
url: “http://192.168.0.133:8080/sencha-touch-app/unit07/09_jsonp_data.jsp“,
callbackKey: “serverKey”,
reader: { type: “json” }
});
[예제] 서버 사이드
– Serverkey 명으로 fucntion 호출하는 구문을 만든다.
– 데이터는 pno 에 들어있는 선택 값에 해당하는 데이터를 넘겨준다.
<%
String serverKey = request.getParameter(“serverKey”);
String pno = request.getParameter(“pno”);
%>
<%if(serverKey != null) {%>
<%=serverKey%>(
<%if(pno.equals(“p1”)) {%>
{
“pno”: “p1”,
“pname”: “갤럭시A”,
“pimage”: “phone01.png”
}