title: ExtJS Change Event Listener failing to fire
body: <p>I was asked to post this as a question on StackOverflow by <a href="http://twitter.com/jonathanjulian" rel="nofollow noreferrer">http://twitter.com/jonathanjulian</a> which was then retweeted by several other people. I already have an ugly solution, but am posting the original problem as requested.</p>
  
  <p>So here's the back story. We have a massive database application that uses ExtJS exclusively for the client side view. We are using a GridPanel (Ext.grid.GridPanel) for the row view loaded from a remote store.</p>
  
  <p>In each of our interfaces, we also have a FormPanel (Ext.form.FormPanel) displaying a form that allows a user to create or edit records from the GridPanel. The GridPanel columns are bound to the FormPanel form elements so that when a record is selected in the GridPanel, all of the values are populated in the form. </p>
  
  <p>On each form, we have an input field for the table row ID (Primary Key) that is defined as such:</p>
  
  <pre><code>var editFormFields = [
  {
       fieldLabel: 'ID',
       id: 'id_field',
       name: 'id',
       width: 100,
       readOnly: true, // the user cannot change the ID, ever.
       monitorValid: true
  } /* other fields removed */
  ];
  </code></pre>
  
  <p>So, that is all fine and good. This works on all of our applications. When building a new interface, a requirement was made that we needed to use a third-party file storage API that provides an interface in the form of a small webpage that is loaded in an IFrame. </p>
  
  <p>I placed the IFrame code inside of the html parameter of the FormPanel:</p>
  
  <pre><code>var editForm = new Ext.form.FormPanel({
     html: '&lt;div style="width:400px;"&gt;&lt;iframe id="upload_iframe" src="no_upload.html" width="98%" height="300"&gt;&lt;/iframe&gt;&lt;/div&gt;',
     /* bunch of other parameters stripped for brevity */
  });
  </code></pre>
  
  <p>So, whenever a user selects a record, I need to change the src attribute of the IFrame to the API URL of the service we are using. Something along the lines of <a href="http://uploadsite.com/upload?appname=whatever&amp;id=" rel="nofollow noreferrer">http://uploadsite.com/upload?appname=whatever&amp;id=</a>{$id_of_record_selected}</p>
  
  <p>I initially went in to the id field (pasted above) and added a change listener. </p>
  
  <pre><code>var editFormFields = [
  {
       fieldLabel: 'ID',
       id: 'id_field',
       name: 'id',
       width: 100,
       readOnly: true, // the user cannot change the ID, ever.
       monitorValid: true,
       listeners: {
          change: function(f,new_val) {
             alert(new_val);
          }
       }
  } /* other fields removed */
  ];
  </code></pre>
  
  <p>Nice and simple, except that it only worked when the user was focused on that form element. The rest of the time it failed to fire at all.</p>
  
  <p>Frustrated that I was past a deadline and just needed it to work, I quickly implemented a decaying poller that checks the value. It's a horrible, ugly hack. But it works as expected. </p>
  
  <p>I will paste my ugly dirty hack in an answer to this question.</p>