初めてのcontrollerの追加

Sencha Touchのコントローラを使う初歩の初歩のメモ。

過去のアプリケーションを再利用し、そのアプリケーションを起動時にメッセージボックスを表示するコントローラを追加する。

過去のアプリケーション

• caroucelコンポーネントの使い方
• storeのデータをcaroucelコンポーネントに表示

Sencha CMDでControllerを自動作成する。

sencha generate controller Players

今回はアプリケーション起動するときのイベントを追加するだけなのでviewは扱わず、app.jsとapp/controller/Players.jsだけを修正する。

まずはapp.jsにコントローラを追加する。

controllers: ['Players'],

次にapp/controller/Players.jsを以下のように編集する。

app/controller/Players.js

Ext.define('CarouselTest.controller.Players', {
    extend: 'Ext.app.Controller',
    
    config: {
        refs: {
        },
        control: {
            'main': {
                initialize: 'sayGreeting'
            }         
        }
    },

    sayGreeting: function(){
        Ext.Msg.alert('Hello Sencha');
    },
    
    launch: function(app) {
        
    }
});

• 6行目のcontrolオプションが各コンポーネントのイベントハンドラを設定
• 7行目にcontrolオプションのキーとして、イベントハンドラを設定したいコンポーネントのxtypeを指定
• 8行目ではmainコンポーネントのinitializeイベントに対してコントローラのsayGreetingメソッドを紐付け。

この状態で保存して、carouseltestフォルダに移動して

python -m SimpleHTTPServer

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

ちなみに、フリックして新しい画面（コンポーネント）を表示させたいときは、app.controller.Players.jsのcontrolオプションに追記して以下のようにする。

app/controller.Players.js(controlオプションのみ）

control: {
            'main': {
                initialize: 'sayGreeting'
            },
            'viewposition': {
                activate: 'sayGreeting'
            }         
        }

これで、Main.js(xtypeがmain)のCarouselコンポーネントに追加されているViewpositionクラス（Ext.dataview.listを継承。xtypeはviewposition）が表示された（activateイベントが発火した）時にsayGreetingメソッドが実行されるようになる。