[LsitView & JSON 사용하기]
1. JASON 이란?
ㄱ. 모바일 환경등에서 Data를 보다 편리하고, 가볍게 처리하기 위한 양식 ( <-> XML )
ㄴ. Format : {}, [], ”,” 등으로 구성
ㄷ. 구성예
{
result:[
{
'name':'종현1',
'email':'gmail1@gmail.com',
'phone':'11111',
},
{
'name':'종현2',
'email':'gmail2@gmail.com',
'phone':'22222',
},
{
'name':'종현3',
'email':'gmail3@gmail.com',
'phone':'33333',
}
]
}
2. JASON 파일 만들기
ㄱ. [프로젝트 홈]에서 contact.jason 파일을 만들고, 위 예제 파일 내용을 저장
3. Data Model 파일 만들기
ㄱ. [프로젝트 홈]> 터미널 실행
./sdk/command/sencha generate model -n ContactModel -f
name,email,phone
ㄴ. [프로젝트홈]/app/model/ContactModel.js 파일 확인
Ext.define('Sencha.model.ContactModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'auto'},
{name: 'email', type: 'auto'},
{name: 'phone', type: 'auto'}
]
}
});
3. ListView 파일 작성
ㄱ. [프로젝트홈]/app/view/에 ListView.js 추가
ㄴ. 아래 내용 추가
ㄷ. contact.jason / ContactModel 데이터를 이용하여, ContactStore 파일 구현
ㄹ. ContactStore를 이용하여, ContactList 구현
ㅁ. ContactList 파일을 이용하여, config.items에 추가
ㅂ. 파일 구현 내용
Ext.define( 'Sencha.view.ListView',{
extend:'Ext.Panel',
xtype : 'listview',
config:{
layout:'vbox',
},
constructor: function(config) {
config = config || {};
Ext.define('ContactStore', {
extend: 'Ext.data.Store',
config: {
model: 'Sencha.model.ContactModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'contact.json',
extraParams: '',
reader: {
type: 'json',
rootProperty: 'result',
},
},
},
});
Ext.define('ContactList', {
extend:'Ext.List',
xtype:'contactlist',
config:{
store:Ext.create('ContactStore'),
disableSelection:false,
emptyText:'<p> No Data <p>',
itemTpl:Ext.create('Ext.XTemplate', '<h2>{name} : {email}: {phone} </h2>' ),
}
});
config.items = [
{
xtype: 'toolbar',
title: 'List',
},
{
xclass: 'ContactList',
flex: 1,
}
];
this.callParent([config]);
}
});
4. controller 구현하기
1) ListViewController 만들기
ㄱ. [프로젝트홈] 터미널 실행
ㄴ. command 실행
./sdk/command/sencha generate controller -n ListViewController
2) control 이벤트 및 호출함수 구현
Ext.define('Sencha.controller.ListViewController', {
extend: 'Ext.app.Controller',
config: {
refs: {
},
control: {
contactlist: {
itemtap: 'itemSelected',
},
}
},
itemSelected: function(list, index, node, record) {
console.log(list);
console.log(index);
console.log(node);
console.log(record);
},
});
'프로그래밍 > Mobile Web App 개발' 카테고리의 다른 글
| [모바일 웹앱 전문 개발자 과정] 6일차 4/8 #2 (formView) (0) | 2012.04.08 |
|---|---|
| [모바일 웹앱 전문 개발자 과정] 7일차 4/8 #1 (naviView) (0) | 2012.04.08 |
| [모바일 웹앱 전문 개발자 과정] 6일차 4/7 #2 (0) | 2012.04.08 |
| [모바일 웹앱 전문 개발자 과정] 6일차 4/7 #1 (0) | 2012.04.07 |
| [모바일 웹앱 전문 개발자 과정] 5일차 4/6 (0) | 2012.04.06 |
