ExtJS，如何将 ViewModel 绑定到组件配置参数？答案

【问题标题】：ExtJS, how to bind ViewModel to component config parameters?ExtJS，如何将 ViewModel 绑定到组件配置参数？
【发布时间】：2021-05-30 15:07:41
【问题描述】：

在 ExtJS 6.02 上，我想将 ViewModel 绑定到我的组件配置参数。

我尝试了这里所说的：https://stackoverflow.com/a/27284556，但它不起作用，它没有约束力。

这将打印Null 而不是123：

Ext.define('MyApp.viewmodel.Test', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.test',
    data: {
        serverPathData: ''
    }
});

Ext.define('MyApp.view.TestFileField', {
    extend: 'Ext.form.field.Text',
    xtype: 'TestFileField',

    viewModel: {
        type: 'test'
    },
    config: {
        serverPath: null
    },
    publishes: 'serverPath',
    bind: {
        serverPath: '{serverPathData}'
    }
    , initComponent: function() {
        this.getViewModel().set('serverPathData', '123');
        this.getViewModel().notify();
        console.log(this.getServerPath());
        
        this.callParent()
    }
});

Ext.application({
    name: 'MyApp',
    launch: function() {
        var testFileField = Ext.widget({
            xtype: 'TestFileField',
            renderTo: Ext.getBody()
        });
    }
});

使用testFileField.getViewModel().notify(); 确实解决了这个例子中的问题，但在我的例子中它没有。

我有一个共享的 viewModel。

【问题讨论】：

标签： javascript extjs viewmodel

【解决方案1】：

找到了一种解决方案，如果我在 initComponent 上调用 this.initBindable(); 它可以工作：

Ext.define('MyApp.viewmodel.Test', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.test',
    data: {
        serverPathData: ''
    }
});

Ext.define('MyApp.view.TestFileField', {
    extend: 'Ext.form.field.Text',
    xtype: 'TestFileField',

    viewModel: {
        type: 'test'
    },
    config: {
        serverPath: null
    },
    publishes: 'serverPath',
    bind: {
        serverPath: '{serverPathData}'
    }
    , initComponent: function() {
        this.initBindable();
        this.getViewModel().set('serverPathData', '123');
        this.getViewModel().notify();
        console.log(this.getServerPath());
        console.log(this.getViewModel().data);
        this.callParent();
    }
});

Ext.application({
    name: 'MyApp',
    launch: function() {
        var testFileField = Ext.widget({
            xtype: 'TestFileField',
            renderTo: Ext.getBody()
        });
    }
});

这个问题是这个方法是私有的，并且已经在beforeRender和afterRender上调用了，我不知道在initComponent或constructor上调用它是否会导致一些问题。

【讨论】：