title: ExtJS 4: How do I Re-render Ext.Component iframe?
body: <p>How can I re-render this Ext.Component when a combo box option is selected?</p>
  
  <pre><code>var searchForm = Ext.create('Ext.form.Panel', {
      width: 320,
      style: 'margin: 20px',
      renderTo: 'SearchPanel',
      style: {
          position: 'fixed',
          top: '0px',
          left: '865px'
      },
      items: [{
          xtype: 'combo',
          width: 300,
          labelAlign: 'right',
          fieldLabel: 'Subject Area',
          store: subjectAreaStore,
          valueField: 'id',
          displayField: 'value',
          typeAhead: true,
          mode: 'local',
          triggerAction: 'all',
          selectOnFocus: true,
          value: 'Account',
  
          listeners: {
              select: function (combo) {
                  cmp.autoEl.src = '/' + combo.getValue() + '/2nd Iteration.htm';
                  alert(cmp.autoEl.src);
  
                  cmp.render();  // this does not work!
              }
          }  // listeners
      }]
  
  });               
  
  
  // create the cmp
  var cmp = Ext.create('Ext.Component', {
  
      title: 'Data Models',
      style: {
          width: '100%',
          height: '750px'
      },
  
      autoEl : {
          tag : 'iframe',
          src : '/Account/2nd Iteration.htm'
      },
  
      renderTo: 'models'
  });
  </code></pre>
  
  <p><strong>Update: 10/23/2012:</strong></p>
  
  <p><em><strong>This isn't working yet:</em></strong></p>
  
  <pre><code>            listeners: {
                  select: function (combo) {
                      cmp.autoEl.src = '/' + combo.getValue() + '/2nd Iteration.htm';
                      var the_iframe = cmp.getEl().dom;
                      the_iframe.contentWindow.location.reload();
                  }
              }  // listeners
  </code></pre>