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}'}。