PDA

View Full Version : Binding of Width config to ViewModel not working



Markus_W
18 Feb 2015, 2:21 AM
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):



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:



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):



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

slemmon
16 Mar 2015, 2:01 PM
Hi,

What you're looking to do is publish the config up to the ViewModel which doesn't happen with most configs by default. Some configs are listed in the 'publishes' config and publish by default, but not that many. If the config of 'width' were in a 'config' block on the window (or ancestor class) description then you could add 'width' to the 'twoWayBindable' array and this would be published for you automatically.

Since 'width' is not in a 'config' block we have to publish the width manually per event / transaction on the window. Below is an example of you you might do that. In the example we're publishing the width after the component is laid out (on the global idle event so as not to compete with the viewModel's scheduler).

jmp