チュートリアル：ビューコントローラを使う

ExtJSには、ビューコントローラという機能があります。これによってボタン押したり行を選択したりした場合のイベント発火時の処理をビューから切り離すことができます。

前に定義した保存ボタンクリック時の処理を、ビューコントローラに移してみました。

まずはビューコントローラです。

/**
 * Memo.view.main.Mainのビューコントローラクラス。
 *
 * @class Memo.view.main.ViewController
 * @extend Ext.app.ViewController
 */
Ext.define('Memo.view.main.ViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.app_main',

    /**
     * 保存ボタンクリック時の処理。
     */
    onClickSaveButton: function () {
        var me = this,
            view = me.getView(),
            textfield = view.down('form').getComponent(0),
            value = textfield.getValue(),
            dataview = view.down('dataview'),
            store = dataview.getStore();

        store.add({ text: value });
    }
});

Memo.view.main.ViewControllerがビューコントローラです。ビューコントローラは、Ext.app.ViewControllerを継承する必要があります。

aliasコンフィグを指定することで、ビューコントローラのエイリアス名を定義できます。ここではapp_mainとしています。ビューコントローラの場合は「controller.xxx」のように、controllerという文字列を先頭に付与しておきます。

あとは保存ボタンクリック時に実行される処理として、onClickSaveButtonという関数を定義しています。

関数内でgetViewを使うことで、ビューを参照することができます。getViewで参照できるビューは、ビューコントローラを使っているビューとなります。

/**
 * ビューポートクラス。
 *
 * @class Memo.view.main.Main
 * @extend Ext.Panel
 */
Ext.define('Memo.view.main.Main', {
    extend: 'Ext.Panel',
    xtype: 'app_main',

    requires: [
        'Memo.view.main.ViewController'
    ],

    controller: 'app_main',

    bodyPadding: 20,

    items: [
        {
            xtype: 'form',
            items: [
                {
                    xtype: 'textfield',
                    emptyText: 'テキストを入力してください'
                },
                {
                    xtype: 'button',
                    text: '保存',
                    handler: 'onClickSaveButton'
                }
            ]
        },
        {
            xtype: 'dataview',
            tpl: [
                '<tpl for=".">',
                    '<div class="item">{text}</div>',
                '</tpl>'
            ],
            itemSelector: 'div.item',
            store: {
                proxy: 'memory',
                data: [
                    { text: 'アイテム1' },
                    { text: 'アイテム2' },
                    { text: 'アイテム3' }
                ]
            }
        }
    ]
});

controllerコンフィグに、ビューコントローラのエイリアス名を指定することで、このビューがビューコントローラを使いますよー、ということを設定します(requiresに参照するクラス名を定義することをお忘れなく)。

あとは保存ボタンのhandlerコンフィグにonClickSaveButtonを文字列で指定することで、ビューコントローラに定義した関数と結び付けることができます。

これでビュークラスのコードはすっきりしました。