title: ExtJS 5 MVVM: Updating Parent's ViewModel from Child's
body: <p>My ExtJS 5 component's ViewModel is inheriting data from an ancestor's ViewModel.</p>
  
  <p>How do I update the parent's ViewModel's data from the child's perspective? If I try <code>childPanel.getViewModel().set('myProp', 'foo');</code> that creates a new instance of <code>myProp</code> on the <code>childPanel</code> ViewModel, instead of updating <code>parentPanel</code>'s VM. Other components using <code>myProp</code>'s value will be different than <code>childPanel</code>.</p>
  
  <p>By creating that local <code>myProp</code> on the child, when the parent's <code>myProp</code> changes, the child will not change with it, because of the severed relationship.</p>
  
  <p>I only want 1 instance of the <code>myProp</code> property, and for that value to be on the parent's ViewModel.</p>
  
  <p>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 <strong>know</strong> 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.</p>
  
  <hr>
  
  <p><strong>Example</strong> showing the child creating a new instance of <code>panelTitle</code> instead of updating the parent's:</p>
  
  <p><a href="https://fiddle.sencha.com/#fiddle/1e09" rel="nofollow">https://fiddle.sencha.com/#fiddle/1e09</a></p>
  
  <p>EDIT: Moved Button's Click Event to ViewController</p>
  
  <pre><code>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', '&lt;span style="color:red;"&gt;Now They Have Different Titles&lt;/span&gt;');
  
                  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', '&lt;span style="color:green;"&gt;And Are No Longer Using the Same VM Data&lt;/span&gt;');
  
                  }, 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'
              }]
          });
      }
  });
  </code></pre>