初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

任意のコンフィグを双方向バインディングに対応する

ビュー作成時に独自のコンフィグを追加することがあります。

ここでは追加したコンフィグをデータバインディングしてみます。

Ext.define('Sample.view.sample.Panel', {
    extend: 'Ext.panel.Panel',
    xtype: 'sample_panel',

    config: {
        text: null
    },

    applyText: function (text) {
        var me = this;

        me.setHtml(Ext.String.htmlEncode(text));

        return text;
    }
});

まずはtextコンフィグを用意しました。

textコンフィグに値を設定すると、HTMLエンコードして画面に表示するようにしています。

Ext.define('Sample.view.sample.PanelModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.sample_panel',

    data: {
        text: '<b>Hello, World!!</b>'
    }
});

textという値を持ったビューモデルを用意しました。

これをビューにデータバインディングします。

Ext.define('Sample.view.sample.Panel', {
    extend: 'Ext.panel.Panel',
    xtype: 'sample_panel',

    viewModel: 'sample_panel',

    config: {
        text: null
    },

    bind: {
        text: '{text}'
    },

    applyText: function (text) {
        var me = this;

        me.setHtml(Ext.String.htmlEncode(text));

        return text;
    }
});

これでビューモデル => ビューの一方向のデータバインディングとなります。

ビュー => ビューモデルについては、publishesコンフィグを指定する必要があります。

Ext.define('Sample.view.sample.Panel', {
    extend: 'Ext.panel.Panel',
    xtype: 'sample_panel',

    viewModel: 'sample_panel',

    config: {
        text: null
    },

    publishes: {
        text: true
    },

    bind: {
        text: '{text}'
    },

    applyText: function (text) {
        var me = this;

        me.setHtml(Ext.String.htmlEncode(text));

        return text;
    }
});

これで、ビュー側でtextの値が変更されるとビューモデルの値に反映されるようになります。