Sencha Touchでデータを扱うためにmodelとstoreとproxyの違いをこのサイトで理解しておく。
Bureimono stdio.h: Sencha Touch 2 の始め方 Model 編
今回のテスト用アプリケーションは以前のポストのcaroucelコンポーネントの使い方を流用。
モデル作成
sencha generate model --name=Player --fields=name:string,no:int,position:string
これで、
- String型のnameフィールド
- int型のnoフィールド
- String型のpositionフィールド
で構成されるPlayerという名前のモデル(クラス)が作成され、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に下記を追加。
models: ['Player'],
モデルが出来たので次は実際に表示させるためのデータを作成
今回は、インラインデータでの読み込み例を行う。
インラインデータ
app/store/Players.jsファイルを作成(Sencha Cmdでストアは作られないので手動作業)
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に下記を追加
stores: ['Players'],
Viewの作成
調べた範囲ではcaroucelコンポーネント内に直接storeのデータを表示することはできなさそう。(できるとは思うけど調べが足りてない)
なので、caroucelコンポーネントにのconfig.itemsに別のViewを追加する。
今回は、app/viewの下にViewname.jsとViewposition.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フィールドを表示
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は下記の通り。
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 にアクセすることで以下の描画を行うアプリケーションを実行できます。