센차 터치 2.0 , sencha touch 2.0.1.1 senchaexamples.com의
이 번장은 Carousel을 배너 이미지 슬라이딩 쇼를 하는 것과 같은 효과를 주는 것을 알아 보는 시간이다.
방법은 자바스크립트의 setInterval을 사용하여 반복적으로 Carousel의 items을 바꾸는 것이다.
setInterval(function () {
crsl.next();
if (crsl.getActiveIndex() === crsl.getMaxItemIndex()) {
crsl.setActiveItem(0);
}
}, 2000); // setInterval()
실행 화면은 다음과 같다. 캡쳐를 한 상태라 정지된 모습이지만 실제 실행을 해 보면 슬라이딩 되는 것을 확인 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link href="../../frameworks/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<title>Programmatically changing the active item on an Ext.Carousel component in Sencha Touch 2</title>
</head>
<body>
<script src="../../frameworks/sencha-touch-all.js" type="text/javascript"></script>
<script type="text/javascript">
/*
sencha touch 2.0.1.1-commercial
*/
Ext.application({
launch: function () {
var crsl = Ext.create('Ext.Carousel', {
defaults: {
styleHtmlContent: true
},
fullscreen : true,
items : [
{
html : 'red',
style : 'background-color:#f00;'
},{
html : 'orange',
style : 'background-color:#ffb600;'
},{
html : 'yellow',
style : 'background-color:#ff0;'
},{
html : 'green',
style : 'background-color:#80ff4d;'
},{
html : 'blue',
style : 'background-color:#009dff;'
}
]
});
setInterval(function () {
crsl.next();
if (crsl.getActiveIndex() === crsl.getMaxItemIndex()) {
crsl.setActiveItem(0);
}
}, 2000); // setInterval()
}
});
</script>
</body>
</html>
