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

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

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の値が変更されるとビューモデルの値に反映されるようになります。