1

アプリケーションでExtjs-6のMVVM アーキテクチャを使用しています。私は次のようにコントローラーを持っています(注意してください):extend: 'Ext.app.Controller'

Ext.define('App.controller.gt.Point', {
    extend: 'Ext.app.Controller',
    myProp: {
        x: 'x',
        y: 'y'
    },
    init: function()
    {
        ...
    },
    activateDrawing: function()
    {
        ...
        // I want to send myProp to 'App.view.gt.Point' view and 
        // it(myProp) use binding
        var pointWin = Ext.create('App.view.gt.Point', {});
    }
});

が呼び出された場合activateDrawing、コントローラーはウィンドウ (App.view.gt.Pointビュー) を表示します。このウィンドウ クラスは次のとおりです。

Ext.define('App.view.gt.Point', {
    extend: 'Ext.window.Window',
    ...
    controller: 'gt-point',
    viewModel: 'gt-point',
    items: [{
        xtype: 'form',
        items: [{
            xtype: 'numberfield',
            fieldLabel: 'X',

            /*
            * I want to bind the numberfield with myProp.x
            */
            bind: '{myProp.x}',

        }, {
            xtype: 'numberfield',
            fieldLabel: 'Y',

            /*
            * I want to bind the numberfield with myProp.y
            */
            bind: '{myProp.y}',

        }]
    }],
    buttons: [{text: 'OK', action: 'OK', handler: 'onOk'}],
    ...
});

numberfieldsxとが変更された場合、 and を自動的に変更しyたい。この問題をどのように実装できますか?myProb.xmyProb.y

4

2 に答える 2

0

numberfield の値を myProp.x および myProp.y にバインドする必要があります。また、myProp はコントローラーではなく、viewModel にある必要があります。

Ext.define('App.view.gt.Point', {
extend: 'Ext.window.Window',
...
controller: 'gt-point',
viewModel: {
    data:{
        myProp: {
            x: 'x',
            y: 'y'
        }
    }
},
items: [{
    xtype: 'form',
    items: [{
        xtype: 'numberfield',
        fieldLabel: 'X',

        /*
        * I want to bind the numberfield with myProp.x
        */
        bind: {
            value:'{myProp.x}'
        }

    }, {
        xtype: 'numberfield',
        fieldLabel: 'Y',

        /*
        * I want to bind the numberfield with myProp.y
        */
        bind: {
            value:'{myProp.y}'
        }

    }]
}],
buttons: [{text: 'OK', action: 'OK', handler: 'onOk'}],
...
});
于 2015-10-23T09:47:15.220 に答える