Sencha Touch de カルーセル

今回はスマートフォンのアプリっぽくカルーセル表示をさせてみました。
細かいところは Sencha Touch がよろしくやってくれるので楽ちんでした。

  • カルーセル表示
    • 表示用の html(carousel.html) を作成
      • 前回の html とほぼ同じ。js と css を読み込んでいるだけ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>carousel</title>
<link rel="stylesheet" href="/sencha-path/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="/sencha-path/sencha-touch-debug.js"></script>
<script type="text/javascript" src="carousel.js"></script>
</head>
<body>
</body>
</html>
    • アプリ用の Javascript ファイル(carousel.js)を作成
Ext.setup({
  onReady: function() {

    // carousel
    var carousel = new Ext.Carousel({
      items: [
      {
        // 1ページ目の要素
        title: '1',
        html: '<img src="1.jpg" width=200 height=200>'
      },
      {
        // 2ページ目の要素
        title: '2',
        html: '<img src="2.jpg" width=200 height=200>'
      },
      {
        // 3 ページ目の要素
        title: '3',
        html: '<img src="3.jpg" width=200 height=200>'
      }]
    });

    // main panel
    new Ext.Panel({
      // パネルの設定
      fullscreen: true,
      layout: {
        type: 'vbox',
        align: 'stretch'
      },
      defaults: {
        flex: 1
      },
      styleHtmlContent:true,

      // 上で作成した carusel オブジェクトをセット
      items: [
        carousel
      ]
    });
  }
});