Problem with binding the width config to a View Model variable

Hi all,

I encountered the following issue with the width config when it is bound to a view model data variable:

Despite binding the {MyWidth} data variable of the ViewModel to the width-config of a resizable view, the {MyWidth} value is not updated when the view is resized (although the width-config changes, the {MyWidth}-value stays the same - it is only updated in the beginning (when the window is first shown) and is not updated after the window has been resized).

Here is a simple code for illustration:

MyWindow View code with {MyWidth} ViewModel-variable bound to the width config of the view (BTW: the width is also displayed in the view title):

Code:

Ext.define('PMS.view.MyWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.mywindow',

    requires: [
        'PMS.view.MyWindowViewModel',
        'PMS.view.MyWindowViewController'
    ],

    controller: 'mywindow',
    viewModel: {
        type: 'mywindow'
    },
    height: 250,

    bind: {
        reference: 'MyWindow',
        width: '{MyWidth}',
        title: 'My Window {MyWidth}'
    },
    listeners: {
        resize: 'onWindowResize'
    }

});

The corresponding code of the associated ViewModel:

Code:

Ext.define('PMS.view.MyWindowViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.mywindow',

    data: {
        MyWidth: 400
    }

});

The code of the associated ViewController for the resize event (only used to illustrate the problem via console outputs):

Code:

Ext.define('PMS.view.MyWindowViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.mywindow',

    onWindowResize: function(window, width, height, eOpts) {
        console.log("{MyWidth} value in ViewModel: ");
        console.log(this.getViewModel().get('MyWidth'));

        console.log("real width of the window (argument of resize function):");
        console.log(width);

    }

});

When I run the web app and use Firebug to view the console outputs when I resize the window, the problem becomes obvious (each time when the view is resized, the true size of the window (width config) and the value of the {MyWidth} Viewmodel variable are written to the console):

Console output at the Application Start (note that the MyWidth-value of 400 specified in the ViewModel is not used ... The width-config and the MyWidth-variable are set to 300 instead. Why?):

{MyWidth} value in ViewModel:

300
real width of the window (argument of resize function):

300

So both values are still the same in the beginning, but after a slight resize I get the following:

{MyWidth} value in ViewModel:

300
real width of the window (argument of resize function):
306

So the MyWidth ViewModel variable does not reflect the change in the width config. After a second resize, it has still the value 300 that it also had in the beginning:

{MyWidth} value in ViewModel:

300

real width of the window (argument of resize function):
384

Did I do anything wrong in the setup of the ViewModel and/or view? Or can the width config not be bound to a ViewModel variable?

Many thanks in advance for any help.

BTW: I used Sencha Architect to build this small application using the Ext 5.0.1 framework.

When I switch to Ext 5.1.0, the problem is still there.

Best regards,

Markus

Problem with binding the width config to a View Model variable