title: RadioGroup not updating bound value
body: <p>I am using a <code>radiogroup</code> in my form, and I noticed that when I select one of the radio buttons, the value (bound value) is not updated.</p>
  <p>Here's a small example:</p>
  <pre><code>Ext.create({
      xtype: 'container',
      renderTo: Ext.getBody(),
      items: [{
          xtype: 'formpanel',
          viewModel: {
              data: {
                  myValue: 3
              }
          },
          items: [{
              xtype: 'displayfield',
              label: 'This is the value of myValue:',
              bind: '{myValue}'
          }, {
              xtype: 'textfield',
              label: 'Update myValue:',
              bind: '{myValue}'
          }, {
              xtype: 'radiogroup',
              vertical: true,
              label: 'Click a radio button:',
              bind: '{myValue}',
              items: [{
                  label: 'One',
                  value: 1
              }, {
                  label: 'Two',
                  value: 2
              }, {
                  label: 'Three',
                  value: 3
              }, ]
          }]
      }]
  });
  </code></pre>
  <p>I created a simple <code>viewModel</code> with one data value: <code>myValue: 3</code>.  This is bound to all of the form elements: the <code>radiogroup</code>, a <code>textfield</code>, and a <code>displayfield</code>.</p>
  <p>I'd expect that when I click one of the radio buttons, that the <code>displayfield</code> would update its value.  The <code>displayfield</code> value is updated when you type into the <code>textfield</code>, but the <code>radiogroup</code> is not updated.</p>
  <p>It seems like the <code>radiogroup</code> is only using its bound value when it initializes, but it doesn't notice when it gets updated nor does it update it on its own.</p>
  <p>What am I doing wrong?  Why doesn't the bound value get updated when I click on a radio button?</p>
  <p>Here's an example over on Sencha Fiddle: <a href="https://fiddle.sencha.com/#view/editor&amp;fiddle/389i" rel="nofollow noreferrer">https://fiddle.sencha.com/#view/editor&amp;fiddle/389i</a></p>
  <hr />
  <p>UPDATE: I found a solution adding a <code>change</code> listener to the <code>radiogroup</code>.  Well, this fixes updating <code>myValue</code> wen you click on a radio button.  I'd need another listener to update the <code>radiogroup</code> when <code>myValue</code> is updated elsewhere (like in the <code>textfield</code>).</p>
  <p>This works for my needs, but why should I need to add a <code>change</code> listener?  Why doesn't the <code>radiogroup</code> bind to <code>{myValue}</code> correctly?</p>
  <pre><code>listeners: {
      change: function(field, val) {
          let vm = field.lookupViewModel();
          vm.set('myValue', val);
      }
  }
  </code></pre>
  <p>Here's a fiddle with this update applied: <a href="https://fiddle.sencha.com/#view/editor&amp;fiddle/389k" rel="nofollow noreferrer">https://fiddle.sencha.com/#view/editor&amp;fiddle/389k</a></p>