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


Sencha Touchでデータを扱うためにmodelとstoreとproxyの違いをこのサイトで理解しておく。

[Bureimono stdio.h: Sencha Touch 2 の始め方 Model 編](http://satorumpen.blogspot.jp/2012/05/sencha-touch-2-model.html)


今回のテスト用アプリケーションは以前のポストの[caroucelコンポーネントの使い方](http://qiita.com/uchikoshi22/items/78803a68a9d44eff20a2)を流用。


# モデル作成

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


これで、

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

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

```javascript: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に下記を追加。




```javascript:app.js
models: ['Player'],
```

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

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

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

```javascript: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に下記を追加

```javascript:app.js
stores: ['Players'],
```


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

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

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


```javascript: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フィールドを表示


```javascript: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は下記の通り。

```javascript: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](http://0.0.0.0:8000) にアクセすることで以下の描画を行うアプリケーションを実行できます。

![20140824_carouseltest-2.png](https://qiita-image-store.s3.amazonaws.com/0/19083/7f53e0ae-dcd8-0810-8d14-9852948bc752.png "20140824_carouseltest-2.png")