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和y被更改，我想自动更改myProb.x和myProb.y. 如何实现这个问题？

4

2 回答 2

1

数据绑定和 ViewController/Controller 没有任何关系，没有控制器也可以进行数据绑定，只需要一个 ViewModel。

绑定配置没有正确定义，它们就像 XTemplate：

bind : '{myProp.y}'

假设您的 ViewModel 中有 myProp，如下所示：

data : {
    myProp : {
       x : 'foo',
       y : 'bar'
    }
}
于 2015-08-03T11:58:47.950 回答
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 回答