자동 더 보기 예제 : http://senchafiddle.com/server/full.php?token=JA3oa
클릭 더 보기 예제 : http://senchafiddle.com/server/full.php?token=ymQDH
(참고로 위 온라인 예제 사이트는 캐릭터셋 설정을 할 수 없어서 한글이 깨져서 나옵니다!)
------------------------------------------------------------------------------------------------------------
센차 터치의 listpaging와 pullrefresh 플러그인을 사용하여, 요즘 많이 쓰이는 리스트 더보기 기능과 끌어당겨서 새로고침하는 기능을 간단히 구현해 놓은 예제 소스입니다.
사용시 몇가지 설정에 유의하셔야 하는데,
- store의 clearOnPageLoad 값을 false 로 하셔야 더 보기 시에 기존의 데이터를 유지하고 새로운 데이터만 가져옵니다. (기본값 true)
- listpaging의 autoPaging 값이 true일 경우 스크롤이 화면 끝까지 가면 자동으로 더 불러오고, false일 경우 더 보기 버튼이 표시되고 클릭시 더 불러 옵니다.
- store 구성시 pageSize 값에 의해 한번에 불러올 리스트 수가 설정되며, 리스트 조회시 서버로 넘어가는 기본 값은 아래와 같습니다. 이 값을 참조하여 db나 rss를 조회해서 리스트를 뿌려주게 서버단을 만드시면 됩니다.
page:1 //페이지 인덱스
start:10 //리스트 시작 인덱스 //첫 페이지 로딩시에는 값을 넘기질 않습니다.
limit:10 //리스트 수
sort:[{"property":"post_time","direction":"DESC"}] //리스트 정렬 컬럼 인덱스와 방향
------------------------------------------------------------------------------------------------------------
mobile.html 예제 소스
Ext.setup({
fullscreen:true,
onReady:function() {
//리스트 모델
Ext.regModel("list", {
fields:[
"post_id",
"topic_title",
"topic_id",
"author",
{ name:"post_time", type:"date", dateFormat:"timestamp" },
"post_text"
]
});
//리스트 스토어
var store = new Ext.data.Store({
model: "list",
sorters: [{
property: "post_time",
direction: "DESC"
}],
autoLoad: true,
clearOnPageLoad:false, //리스트 더보 기 클릭시 기존 리스트 유지
pageSize: 10, //리스트 조회 수
proxy: {
url: "http://sencha.com/forum/topics-remote.php",
type: "scripttag", //jsonp
reader: {
type: "json",
root: "topics",
totalProperty:"totalCount"
}
}
});
//리스트 템플릿
var listTpl = new Ext.XTemplate(
'<tpl for=".">',
'<li class="list list-title">{topic_title}</li><li class="list list-time">{post_time:date("y/m/d h:iA")}</li>',
'<li class="list list-post">{post_text}</li>',
'<li class="list list-author">by {author}</li>',
'</tpl>'
);
//끌어내리기 템플릿
var pullTpl = new Ext.XTemplate(
'<div class="x-list-pullrefresh">',
'<div class="x-list-pullrefresh-arrow"></div>',
Ext.LoadingSpinner,
'<div class="x-list-pullrefresh-wrap">',
'<h3 class="x-list-pullrefresh-message">{message}</h3>',
'<div class="x-list-pullrefresh-updated">마지막 갱신: <span>{lastUpdated:date("Y/m/d h:iA")}</span></div>',
'</div>',
'</div>'
)
//리스트
var list = new Ext.List({
itemTpl: listTpl,
store: store,
plugins: [{
ptype: "listpaging", //리스트 더 보기 플러그인
autoPaging: false, //true : 스크롤 내리면 자동으로 더 불러오기, false : 더 보기 클릭시 더 불러오기
loadMoreText:"<span style='font-size:20px; font-weight:bold'>더 보기 +</span>" //더 보기 버튼 메시지
}, {
ptype: "pullrefresh", //끌어내려서 새로고침
pullTpl: pullTpl,
pullRefreshText: "아래로 끌어내려서 새로고침",
releaseRefreshText: "손을 놓으면 새로고침...",
loadingText: "새로고침 중..."
}]
});
//패널
var panel = new Ext.Panel({
fullscreen: true,
layout: "fit",
dockedItems: [
{
dock: "top",
xtype: "toolbar",
title: "리스트 더 보기 예제"
}
],
items:[list]
});
}
});
'Sencha Touch' 카테고리의 다른 글
| 로딩바 loading LoadMask (0) | 2012.01.26 |
|---|---|
| JQuery Mobile? and Sencha Touch (0) | 2012.01.15 |
| 클릭시 새로운 패널로 이동 예제 (0) | 2011.12.21 |
| Sencha Touch 란!? (0) | 2011.12.08 |
