title: ExtJs Two way binding between parent and child component
body: <p>I have two components: A panel and a custom text field.<br>
  The panel has a viewmodel and I want to bind a value (called <code>testData</code>) from that viewmodel to a property (called <code>test</code>) of the custom text field.<br>
  That works fine ...basically.<br>
  But when the <code>test</code> property of the text field is changed, the <code>testData</code> in the viewmodel of the panel does not update accordingly. I mean when the <code>test</code> property of the child element (the textfield) is modified, the <code>testData</code> property of the panel's viewmodel should contain the same value that is in <code>test</code>, just like a normal two-way bind.</p>
  
  <p>I'm not sure what I'm doing wrong, but here is what I've tried to far:
  <a href="https://fiddle.sencha.com/#fiddle/20pu&amp;view/editor" rel="nofollow noreferrer">https://fiddle.sencha.com/#fiddle/20pu&amp;view/editor</a></p>
  
  <pre><code>Ext.define('MyMain', {
      extend: 'Ext.panel.Panel',
      alias: 'widget.main',
  
      width: '100%',
      bodyPadding: 10,
  
      viewModel: {
          data: {
              testData: 'Example Data'
          }
      },
  
      bind: {
          title: '{testData}'
      },
  
      items: {
          xtype: 'myField',
          bind: {
              test: '{testData}'
          }
      }
  })
  
  Ext.define('MyField', {
      extend: 'Ext.form.field.Text',
      alias: 'widget.myField',
      fieldLabel: 'Data',
      width: '100%',
  
      config: {
          test: null // when test is changed, it should also affect the {testData} bind of the main component, causing the title to change
      },
  
      setTest(value) {
          this.test = value + ' modified!' // because of the bind, this /should/ automatically get appied to the viewmodel's `testData` and thus to the panel title
          this.setValue(this.test) // whenever the `test` property is changed, we write the contents to the value of the text field (just to visualize the `test` property).
          // But as you can see, the panel title will still just say `Example Data` and not `Example Data modified!` as it should.
      },
      getTest(){
          return this.test
      }
  })
  
  Ext.application({
      name : 'Fiddle',
  
      launch : function() {
          Ext.create('Ext.container.Viewport', {
              items: [{
                  xtype: 'main'
              }]
          })
      }
  })
  </code></pre>