チュートリアル：基本的なコンポーネントを使ってみる

コンポーネントの配置

Example(http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#components)を見ながら、ExtJSが標準で提供しているコンポーネントを試してみました。

どんなものがあるかは、Exampleを見るのが一番だと思います。

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

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

itemsコンフィグを使って、コンポーネントを配置することができます。

xtype: 'form'のように記載していますが、ここにはエイリアス名を指定します。つまり最初にフォームパネルを設置していることになります。

さらに、フォームパネル内にitemsコンフィグを使ってテキストフィールドとボタンを設置しています。

あとデータビューを設置しました。dataview(データビュー)は、一覧表示する場合に使うコンポーネントで、ストアに格納されたデータを表示します。

コンポーネントを連動してみる

やってみたいのは、テキストフィールドに入力した文字列を保存ボタンでデータビューに転記する、といった感じです。

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

    items: [
        {
            xtype: 'form',
            items: [
                {
                    xtype: 'textfield',
                    emptyText: 'テキストを入力してください'
                },
                {
                    xtype: 'button',
                    text: '保存',
                    handler: function () {
                        var textfield = this.up().getComponent(0),
                            value = textfield.getValue(),
                            dataview = this.up('app_main').down('dataview'),
                            store = dataview.getStore();

                        store.add({ text: value });
                    }
                }
            ]
        },
        {
            xtype: 'dataview',
            tpl: [
                '<tpl for=".">',
                    '<div class="item">{text}</div>',
                '</tpl>'
            ],
            itemSelector: 'div.item',
            store: {
                proxy: 'memory',
                data: [
                    { text: 'アイテム1' },
                    { text: 'アイテム2' },
                    { text: 'アイテム3' }
                ]
            }
        }
    ]
});

ボタンのhandlerコンフィグに関数を指定することで、ボタンを押したときに実行される処理を定義できます。関数内でのthisは保存ボタン自身なので、そこから親のコンポーネントを辿ってアクセスしています。upやdownメソッドを使って親や子のコンポーネントを参照しています。引数にエイリアス名を指定することもできます。

最後にテキストフィールドから取得した値を、ストアに追加することでデータビューに反映できました。

ただ、さすがにこれでは無理やりすぎるので、次はリファクタリングしてみようと思っています。