CODEWITHSUNDEEP
extjsmvvmdata-bindingextjs6extjs6-classic
Morteza Malvandi
Morteza Malvandi

Reputation: 1724

Extjs-6 MVVM architecture data binding from Ext.app.Controller?

I'm using MVVM architecture of Extjs-6 in my application. I have controller as follow(paying attention to 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', {});
    }
});

if activateDrawing is called, controller show a window(App.view.gt.Point view). This window class is as follow:

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'}],
    ...
});

If numberfields x and y be changed, I want to automatically change myProb.x and myProb.y. How can implement this issue?

Upvotes: 1

Views: 1864

Answers (2)

LightNight
LightNight

Reputation: 851

you must bind numberfield's value to myProp.x and myProp.y. also myProp must be in viewModel, not in controller.

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'}],
...
});

Upvotes: 0

Mitchell Simoens
Mitchell Simoens

Reputation: 2536

Data binding and ViewController/Controller have nothing to do with each other, you can have data binding without a controller, you only need a ViewModel.

The bind configs are not defined correctly, they are like XTemplate:

bind : '{myProp.y}'

Assuming you have the myProp in your ViewModel something like this:

data : {
    myProp : {
       x : 'foo',
       y : 'bar'
    }
}

Upvotes: 1

Related Questions