ExtJS,如何绑定ViewModel到组件配置参数?

ssgvzors  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(206)

在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();确实解决了这个例子中的问题,但在我的例子中却没有。
我有一个共享的视图模型。

r1zk6ea1

r1zk6ea11#

找到了一个解决方案,如果我在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()
        });
    }
});

这个方法的问题是这个方法是私有的,并且已经在beforeRenderafterRender上调用过,我不知道在initComponentconstructor上调用它是否会导致一些问题。

相关问题