Binding width config to ViewModel not working

Hi all,

I have already posted this message in the Q&A-section (which has not been answered until now), but after a few further tests I have done myself, I believe that this is really a bug, so I decided to post it in this forum again:

Despite binding the {MyWidth} data variable of the ViewModel to the width-config of a resizable view (Ext.window object), 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 once in the beginning (when the window is first shown) and is not updated after the view window has been resized by the user. But it should be updated as the View binding should be two-way. Remark: I also tried to add the width config to the 'publishes' section of the view and to set the 'reference' config for the view to some name, but this did not work either.).

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

Binding width config to ViewModel not working