Chris Schmitz Chris Schmitz - 1 year ago 88
Javascript Question

Extjs bound html not updating when viewmodel data is changed

I have a view that has the html config bound to data within my viewmodel.

The view

extend: 'Ext.Panel',
renderTo: Ext.getBody(),
height: 300,
controller: 'myviewcontroller',
type: 'myviewmodel'

title: 'Testing formula updates',
html: 'Date: <b>{selectedDate}</b>, <br />Month: <b>{currentMonth}</b>'

{xtype: 'button', text: 'Increment Month', handler: 'onIncrementMonth'}

The ViewModel

extend: '',
alias: 'viewmodel.myviewmodel',

selectedDate: new Date()
currentMonth: function (get){
var monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
var monthNumber = get('selectedDate').getMonth();
return monthNames[monthNumber];


When the view is initially rendered, the bound data populates into the HTML config as expected.

I then created a method in my viewcontroller to increment the date.

The ViewController

extend: '',
alias: 'controller.myviewcontroller',

onIncrementMonth: function (){
var vm = this.getViewModel();
var dateChange = vm.get('selectedDate');

dateChange.setMonth(dateChange.getMonth() + 1);

vm.set('selectedDate', dateChange);

I'm sure this is leading to a facepalm moment, but I was expecting that when I update the
data in my viewmodel, it should trigger both bound pieces of my html config to update, but it's not.

The viewmodel data is definitely updating. If you inspect the
variable in the viewcontroller when you click the increment button the second time you'll see that the date has indeed increased.

Is there something I'm missing as far as getting my bound config to update?

I have this here in a fiddle.

Answer Source

Once I changed the line:

vm.set('selectedDate', dateChange);


vm.set('selectedDate', new Date(dateChange));

It works.