title: Is it possible to dynamically update a bind in extjs5?
body: <p>I am trying change a bind dynamically in extjs5 and I can't quite figure out how or if this is even possible or if I'm just going about this the wrong way entirely. I'll try to explain what I am trying to do.  I have a textarea defined like:</p>
  
  <pre><code>id: 'final-view',
  xtype: 'textareafield',
  editable: false,
  bind:{
    value: '{r.options}'
  }
  </code></pre>
  
  <p>In my viewModel I have:</p>
  
  <pre><code>data: {
    r:{
      options: {}
    }
  }
  </code></pre>
  
  <p>The page is layed out like:</p>
  
  <pre><code>textarea
  "Add Option" button
  option 1
  ...
  option n
  </code></pre>
  
  <p>I have a button "Add Option" which adds a combo box to the page with a store of options and they can then select something from the drop down and type extra content into the combo. When the combo is created I have a variable that increments and this number is used to create unique ids:</p>
  
  <pre><code>var new_opt = 'r.options.opt_' + cnt;
  </code></pre>
  
  <p>This is used to add an element to the r.options object as follows:</p>
  
  <pre><code>viewModel.set(new_opt, '');
  </code></pre>
  
  <p>Each combo created has a bind defined like:</p>
  
  <pre><code>bind: {
    value: '{r.options.opt_' + this.id.substr(14) + '}'
  }
  </code></pre>
  
  <p>where "this.id.substr(14)" is my cnt variable i.e. 1. So the value bind for the first option is "{r.options.opt_1}".
  The end goal is to have all of the content from each combo box concatenated and bound to the textarea. What I want to do is dynamically update the bind for the textareafield when an option is added so that way when any combo box is typed into it will update the final view. So for example if there were 2 options the data object in the view model would look like:</p>
  
  <pre><code>data: {
    r:{
      options: {opt_1: 'value1', opt_2: 'value2'}
    }
  }
  </code></pre>
  
  <p>So with this I would want to change my bind to be as follows:</p>
  
  <pre><code>id: 'final-view',
  xtype: 'textareafield',
  editable: false,
  bind:{
    value: '{r.options.opt_1} {r.options.opt_2}'
  }
  </code></pre>
  
  <p>and in the textarea you would see the content "value1 value2". What I want to avoid is repopulating the textarea from scratch each time by looping through all of the elements in the "r.options" object and changing the value, so I figured if there was a way to update the bind for the value field this would be more efficient. Any help or guidance would be appreciated, I'm still fairly new to the MVVM paradigm.</p>