SenchaTouch

ControllerからViewに値を渡して表示

More than 3 years have passed since last update.

Sencha Touchを使って、ControllerでStoreからデータを取ってきてViewに値を渡してXTemplateで表示するシンプルな例。


アプリ作成

下記コマンドでValuetestというサンプルアプリをつくる。

sencha -sdk $HOME/Code/Framework/touch-2.3.1 generate app Valuetest valuetest


モデル作成

できたvaluetestディレクトリに移動して下記コマンドでモデルを作成する。

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


app/model/Players.js(自動生成)

Ext.define('Valuetest.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を作成する。


app/store/Players.js

Ext.define('Valuetest.store.Players', {

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

app.jsに下記を追加。


app.jsの一部

stores: ['Players'],



ビューの作成。

下記内容でapp/view/Main.jsを作成。(自動作成されているコードは全削除)


app/view/Main.js

Ext.define('Valuetest.view.Main', {

extend: 'Ext.Container',
xtype: 'mainview',
config: {
tpl: Ext.create('Ext.XTemplate',
'<tpl>',
'<p>{name} {no} {position}</p>' //1
'</tpl>'
)
}
})


  1. {name}と{no}と{position}にコントローラから渡される値を表示する。


コントローラーの作成

下記コマンドでコントローラを作成。

sencha generate controller Main

app.jsにコントローラを追加


app.jsの一部

controllers: ['Main'],


下記内容でapp/controller/Main.jsを作成。


app/controller.js

Ext.define('Valuetest.controller.Main', {

extend: 'Ext.app.Controller',

config: {
refs: {
mainViewer: 'mainview' //1
},
control: {
'mainview': { //2
activate: 'showData'
}
},
},

showData: function(){
var store = Ext.getStore('Players');
var player = store.first();
var view = this.getMainViewer(); //3
view.setData( //4
{name: player.get('name'),
no: player.get('no'),
position: player.get('position')}
);
},

});



  1. app/view/Main.js(xtypeでmainviewと定義)にアクセスするための参照キーとしてmainViewerを定義

  2. app/view/Main.js(xtypeでmainviewと定義)のイベントに対する定義

  3. キーであるmainViewer(参照先はrefsオプションで定義しているようにapp/view/Main.js、xtypeはmainview)のコンポーネントを取得

  4. setDataで参照先であるmainViewer(参照先はrefsオプションで定義しているようにapp/view/Main.js、xtypeはmainview)に値をセット。


ブラウザで確認

アプリルートディレクトリで下記コマンドで簡易HTTPサーバを起動。

python -m SimpleHTTPServer

これで次のような描画ができる。

Valuetest.png