caroucelコンポーネントの使い方

carouselコンポーネントを使ってフリック操作によるページめくりを行うシンプルな実装例。

動作環境

• Sencha Touch 2.3.1
• Sencha Cmd 5.0.1.231

まず、CarouselTestとしてアプリケーションを作ります。

sencha -sdk$HOME/Code/Framework/touch-2.3.1 generate app CarouselTest carouseltest

次に、carouseltest/app/view/Main.jsを次のように書き換えます。

Main.js

Ext.define('CarouselTest.view.Main', {
     extend: 'Ext.Carousel',
     xtype: 'main',
     config: {
          xtype: 'carousel',
          fullscreen: true,
          direction: 'horizontal',
          items: [
               {
                    html: 'page-1',
                    style: 'background-color: red'
               },
               {
                    html: 'page-2',
                    style: 'background-color: blue'
               },
               {
                    html: 'page-3',
                    style: 'background-color: green'
               }
          ]
     }
})

1行目
クラスの定義

2行目
carouselコンポーネントを使うためにExt.Carouselクラスを継承

3行目
CarouselTest.view.Mainクラスの別名

4行目
configオプションの定義内容でコンポーネントの振る舞い・見た目を操作

5行目
xtype別名定義によりコンポーネントとしてcarouselを指定

6行目
全画面を有効にする

7行目
フリックの方向を水平に指定

8行目以下
carouselコンポーネント（正確にはCarouselTest.view.Mainクラス)が内包するコンポーネントを定義

3つのhtml要素をcarouselコンポーネントの子要素として定義

これで、carouseltestフォルダに移動して

python -m SimpleHTTPServer

とするとブラウザで http://0.0.0.0:8000 にアクセすることで以下の描画を行うアプリケーションを実行できます。