ExtJS 5/6。私のカスタムオブジェクトの設定属性をバインド可能にするには？

Question

私は設定属性bでカスタムオブジェクトAを持っている：私はViewModelに作成

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

- アップデート： 私は一例で、このバイオリンを書いた 私は、コードを縮小されているが、私は私の実際のviewmodelで、私はいくつかの設定変数を持つオブジェクトを持っているという事実を逃した、と私は持っていることについて考えていますそれをビューモデルに入れ、それをビューと同期させます。コンポーネントに「参照」がある場合と同様です。

ありがとうございました！

Answer 1

propertyとconfigの違いは、クラスインスタンスでプロパティを呼び出すことができますが、configはそのクラスがExt.Baseのときだけセッターとゲッタで呼び出す必要があるということです。 （あなたがExt.Componentからクラスを拡張する場合は、必要に応じExt.Baseクラスconstructorは単なるプレースホルダです。これは、コンポーネントのすべての作業を行い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ゲッターとセッターのメソッドを自動的に作成するのに使用されますが、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プロパティをクラスに追加するか、Ext.app.ViewModel.formulasを使用する必要があります。

チェックthis fiddle。

A.config.bも{xtype: 'textfield', bind: '{a.config.b}'}のように使用できます。