title: Removing Listeners from components in ExtJS
body: <p>I have a two way update happening between two of my text fields (NOTE: I do not want to use MVVM binding for this).</p>
  
  <p><strong>textfield1</strong> updates <strong>textfield2</strong> and vice versa when there is a key press. I need to disable the listeners on the recieving textfield, otherwise I end up in an infinite loop.</p>
  
  <pre><code>Ext.define('MyApp.view.TestView', {
      extend: 'Ext.panel.Panel',
      layout: 'form',
  
      items: [{
          id: 'tf1',
          xtype: 'textfield',
          fieldLabel: '1',
          listeners: {
              change: function() {
                  var r = Ext.ComponentQuery.query('#tf2');
                  r[0].setValue(this.getValue() + "!")
              }
          }
      }, {
          id: 'tf2',
          xtype: 'textfield',
          fieldLabel: '2',
          listeners: {
              change: function() {
                  var r = Ext.ComponentQuery.query('#tf1');
                  r[0].setValue(this.getValue() + "!")
              }
          }
  
      }]
  });
  </code></pre>
  
  <p>Obviously in the above example, if I do a keypress I end up with two textfields with infinite '!' at the end.</p>
  
  <p>Fiddle is here :</p>
  
  <p><a href="https://fiddle.sencha.com/#fiddle/1ces" rel="nofollow">https://fiddle.sencha.com/#fiddle/1ces</a></p>
  
  <p>I need to disable the listeners. I had a look at '<strong>removeListener</strong>', and I think you would use it like this :</p>
  
  <pre><code>        r[0].removeListener('change');
  </code></pre>
  
  <p>However I need a reference to my listener, so I can add it back once the setValue(..) has occurred.</p>