チュートリアル：referenceを使って参照する

フォームの入力欄をカスタマイズすることにしました。

入力項目は「タイトル」「本文」の2つです(だんだんメモ登録っぽくしていってます)。

/**
 * ビューポートクラス。
 *
 * @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: [
                {
                    reference: 'title',
                    xtype: 'textfield',
                    emptyText: 'タイトルを入力してください'
                },
                {
                    reference: 'body',
                    xtype: 'textarea',
                    emptyText: '本文を入力してください'
                },
                {
                    xtype: 'button',
                    text: '保存',
                    handler: 'onClickSaveButton'
                }
            ]
        },
        {
            reference: 'list',
            xtype: 'dataview',
            tpl: [
                '<tpl for=".">',
                '<div class="item">{title}</div>',
                '</tpl>'
            ],
            itemSelector: 'div.item',
            store: {
                proxy: 'memory',
                data: [
                    { title: 'タイトル1', body: '本文1' },
                    { title: 'タイトル2', body: '本文2' },
                    { title: 'タイトル3', body: '本文3' }
                ]
            }
        }
    ]
});

そして、ビューコントローラから入力フィールドを参照するのにgetComponentを使っていましたが、入力フィールドの順番を入れ替えるとその度に修正しないといけないので、referenceを使うように変更しました。

/**
 * 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,
            titleField = me.lookupReference('title'),
            bodyField = me.lookupReference('body'),
            list = me.lookupReference('list'),
            store = list.getStore();

        store.add({
            title: titleField.getValue(),
            body: bodyField.getValue()
        });
    }
});