ExtJS 5 MVVM: Updating Parent's ViewModel from Child's - extjs

Question

My ExtJS 5 component's ViewModel is inheriting data from an ancestor's ViewModel.
How do I update the parent's ViewModel's data from the child's perspective? If I try childPanel.getViewModel().set('myProp', 'foo'); that creates a new instance of myProp on the childPanel ViewModel, instead of updating parentPanel's VM. Other components using myProp's value will be different than childPanel.
By creating that local myProp on the child, when the parent's myProp changes, the child will not change with it, because of the severed relationship.
I only want 1 instance of the myProp property, and for that value to be on the parent's ViewModel.
To fix this, it seems that my child VM would have to know if the property was inherited or if it was stored locally, requiring the child to know the correct architecture of the application. It has to know much more of the application's architecture than I am comfortable with, significantly coupling the child to the parent.
Example showing the child creating a new instance of panelTitle instead of updating the parent's:
https://fiddle.sencha.com/#fiddle/1e09
EDIT: Moved Button's Click Event to ViewController
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('ChildPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.childpanel',
controller: 'childpanelcontroller',
bind: {
title: '{panelTitle}'
},
// first panel has its own viewmodel, which is a child of the viewport's VM
viewModel: {
data: {
'btnText': 'Click to Change Title'
}
},
items: [{
xtype: 'button',
scale: 'large',
bind: {
text: '{btnText}'
},
listeners: {
'click': 'onButtonClick'
}
}]
});
Ext.define('ChildPanelController', {
extend: 'Ext.app.ViewController',
alias: 'controller.childpanelcontroller',
onButtonClick: function(btn) {
// updates first panel's VM
this.getViewModel().set('panelTitle', '<span style="color:red;">Now They Have Different Titles</span>');
debugger;
window.setTimeout(function() {
// by setting the first panel's VM instead of the viewport's,
// the first panel will not use viewport's VM for `panelTitle` property again
btn.up('viewport').getViewModel().set('panelTitle', '<span style="color:green;">And Are No Longer Using the Same VM Data</span>');
}, 500);
}
});
Ext.create('Ext.container.Viewport', {
viewModel: {
data: {
'panelTitle': 'Both Have the Same Title'
}
},
layout: 'hbox',
items: [{
xtype: 'childpanel',
flex: 1
}, {
// second panel uses the viewport's viewmodel
xtype: 'panel',
bind: {
title: '{panelTitle}'
},
flex: 1,
margin: '0 0 0 25px'
}]
});
}
});

Answer 1

After talking to Sencha support, I created an override for the Ext.app.ViewModel set function.
Ext.define('Overrides.app.ViewModel', {
override: 'Ext.app.ViewModel',
/**
* Override adds option to only update the ViewModel that "owns" a {#link #property-data} property.
* It will traverse the ViewModel tree to find the ancestor that the initial ViewModel inherited `path` from.
* If no owner is found, it updates the initial ViewModel.
*
* Only uses the override if `onlyUpdateOwner` parameter is `true`.
*
* #param {Boolean} [onlyUpdateOwner=false] If `true`, uses override to update VM where `path` is stored
* #inheritdoc Ext.app.ViewModel#method-set
* #override_ext_version ExtJS 5.1.2.748
*/
set: function (path, value, onlyUpdateOwner) {
var vm = this,
foundOwner = false,
ownerVM = vm;
onlyUpdateOwner = Ext.valueFrom(onlyUpdateOwner, false);
if (onlyUpdateOwner) {
// find ViewModel that initial ViewModel inherited `path` from (if it did)
do {
// `true` if `path` ***ever*** had a value (anything but `undefined`)
if (ownerVM.hadValue && ownerVM.hadValue[path]) {
break;
}
} while (ownerVM = ownerVM.getParent());
}
// reverts to initial ViewModel if did not inherit it
ownerVM = ownerVM || vm;
ownerVM.callParent([path, value]);
}
});
It now gives the developer the option to only update the ViewModel that was the source of the property.
If it cannot find a ViewModel that "owns" the property, it falls back to the initially-called-from ViewModel.
It finishes by calling the original ExtJS set function with the proper ViewModel context.

Answer 2

In order to get the ViewModel from any child component, you can override the Component class with this:
Ext.define(null, {
override: 'Ext.Component',
getVM() {
let vm = this.up();
do {
if(vm.getViewModel())
break;
} while (vm = vm.up());
return vm.getViewModel()
}
});
Then you can just call this.getVM() from any child component, no matter how down deep they are. Something similiar can be done to get the ViewController.
I wonder if this functionality is already part of ExtJS.