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

Question

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

我试过这里所说的：但它不起作用，它没有约束力。

这会打印 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。

Answer 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 还是 [=15 上调用它=] 可能会导致一些问题。

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

ExtJS, how to bind ViewModel to component config parameters?

javascript

extjs

viewmodel