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

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

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