ExtJS 5/6。如何使我的自定义对象配置属性可绑定？

Question

我有一个自定义对象A用config属性b：

Ext.define('A', { 

    config: { 
     b: 1 
    }, 

    constructor: function(config) { 
     this.initConfig(config); 
     return this; 
    } 
}) ; 

我创建一个视图模型：

viewModel: { 
    data: { 
     a: Ext.create('A') 
    } 
}, 

，但是这种结合是不工作：

items: [ 
    { 
     xtype:'textfield', 
     bind:'{a.b}' 
    }, 

我是什么做错了？ 我写这拨弄例如：https://fiddle.sencha.com/#view/editor&fiddle/27qp

- 更新： 我已经过压缩的代码，但我错过了一个事实，即在我的实际视图模型我有几个配置变量的对象，我想有它在视图模型中并使其与视图同步。就像当你在一个组件中有一个“引用”一样。

谢谢！

Answer 1

属性和配置的区别在于可以用类实例调用属性，而只有当我们的类延伸Ext.Base时，配置必须用其setter和getter调用。 （该Ext.Base类constructor只是一个占位符，这是Ext.Component构造，做所有的工作部件。因此，如果您从Ext.Component扩展您的类，如需要相同的代码会工作。）

现在，为了使这代码的工作，我们将不得不修改它是这样的：

Ext.define('A', { 
    config: { 
    b: 1 
    }, 
    constructor: function (config) { 
    this.initConfig(config); 
    return this; 
    } 
}); 

var objA = Ext.create('A'); 

Ext.create('Ext.window.Window', { 
    title: 'Example', 
    viewModel: { 
    data: { 
     //a: Ext.create('A'), 
     x: objA.getB(), 
    } 
    }, 
    width: 400, 
    layout: 'vbox', 
    items: [{ 
    xtype: 'textfield', 
    reference: 'mytextfield', 
    bind: '{x}' 
    }, { 
    xtype: 'button', 
    text: 'show a.b value', 
    handler: function (button) { 
     alert(this.lookupViewModel().get('x')); 
    } 
    }] 
}).show(); 

我已经更改了code。希望这个对你有帮助。

Answer 2

Ext.Class.config用于自动创建getter和setter方法，但它会创建A.b类属性本身，其仍然为A.config.b。

的问题是，Ext.mixin.Bindablebind或publishes内部使用Ext.app.ViewModel通用get(path)和set(path, value)方法，不sertain getter和setter方法，所以它会尝试使用完全相同A.b，不A.getB()。

您必须将b属性添加到类本身，而不是其config或使用Ext.app.ViewModel.formulas。

检查this fiddle。

您还可以使用A.config.b类似{xtype: 'textfield', bind: '{a.config.b}'}。