モデル作成

sencha generate model --name=Player --fields=name:string,no:int,position:string

これで、

String型のnameフィールド
int型のnoフィールド
String型のpositionフィールド

で構成されるPlayerという名前のモデル（クラス）が作成され、app/model/Player.jsが以下の内容で作られる。

app/model/Player.js


Ext.define('CarouselTest.model.Player', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            { name: 'name', type: 'string' },
            { name: 'no', type: 'int' },
            { name: 'position', type: 'string' }

        ]
    }
});

アプリで生成したモデルを使うためにapp.jsに下記を追加。

app.js

models: ['Player'],

モデルが出来たので次は実際に表示させるためのデータを作成

今回は、インラインデータでの読み込み例を行う。

インラインデータ

app/store/Players.jsファイルを作成（Sencha Cmdでストアは作られないので手動作業）

app/store/Players.js

Ext.define('CarouselTest.store.Players', {
    extend: 'Ext.data.Store',
    config: {
        model: 'CarouselTest.model.Player',
        data: [
            {
                name: 'Wayne Rouney',
                no: 10,
                position: 'Striker'
            },
            {
                name: 'Daren Flecher',
                no: 24,
                position: 'Midfielder'
            }
        ]
    }
})

1行目でクラス名の宣言
2行目で継承元であるExt.data.Storeクラスを指定
4行目でストアが参照するモデルを指定
5行目のdataオプションでインラインデータを直接記述

アプリでストアを使うためにapp.jsに下記を追加

app.js

stores: ['Players'],

Viewの作成

調べた範囲ではcaroucelコンポーネント内に直接storeのデータを表示することはできなさそう。（できるとは思うけど調べが足りてない）

なので、caroucelコンポーネントにのconfig.itemsに別のViewを追加する。

今回は、app/viewの下にViewname.jsとViewposition.jsを追加する。

app/view/Viewname.js

Ext.define('CarouselTest.view.Viewname', {
    extend: 'Ext.dataview.List',
    xtype: 'viewname',
    config: {
        store: 'Players',
        itemTpl: '<div>{name}</div>'
    },

})

1行目でクラス名の宣言
2行目でデータを表示するためのコンテナとしてExt.dataview.Listコンポーネントを継承
3行目で他のクラスからこのviewを呼び出すためのエイリアスを宣言
5行目で参照先ストアを指定
itemTplコンフィグでPlayersストアのnameフィールドを表示

app/view/Viewposition.js

Ext.define('CarouselTest.view.Viewposition.js', {
    extend: 'Ext.dataview.List',
    xtype: 'viewposition',
    config: {
        store: 'Players',
        itemTpl: [
            '<div>{no}, {position}</div>'
        ]
    }
})

3行目で他のクラスからのこのviewを呼び出すためのエイリアスを宣言

app.jsに追加したViewを登録する。この時点でapp.jsのviewsは下記の通り。

views: [
        'Main',
        'Viewname',
        'Viewposition',
    ],

次にアプリケーション起動時に初期化されるapp/view/Main.jsは下記の通り。

app/view/Main.js

Ext.define('CarouselTest.view.Main', {
    extend: 'Ext.Carousel',
    xtype: 'main',
    requires: [
        'CarouselTest.view.Viewname',
        'CarouselTest.view.Viewposition',       
    ],
    config: {
        xtype: 'carousel',
        fullscreen: true,
        direction: 'horizontal',
        items: [
            {
                xtype: 'viewname'
            },
            {
                xtype: 'viewposition'
            }
        ]
    }
})

4行目のrequiresオプションでMain.jsが参照するクラスを指定
12行目のitemsコンフィグではボタンやテキストではなく、Carouselコンポーネントに追加する（乗っけているイメージで）Dataviewコンポーネントをそれぞれ指定。

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

python -m SimpleHTTPServer

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

storeのデータをcaroucelコンポーネントに表示

モデル作成

インラインデータ

Viewの作成