Uncaught Error: DOM element with id x in Element cache is not same as element in DOM
<p>I've the following code in UI on the button Click event, which is returning an MS-Excel file. It works perfectly in first click event but, return the following error afterwards.</p>

<p>Any suggestions, how can I get rid of it?</p>

<blockquote>
  <p>ERROR: Uncaught Error: DOM element with id iframe in Element cache is
  not the same as element in the DOM. Make sure to clean up Element
  instances using destroy()</p>
</blockquote>

<pre><code>{
var body = Ext.getBody();
var frame = body.createChild({
tag:'iframe'
,cls:'x-hidden'
,id:'iframe'
,name:'iframe'
});

var form = body.createChild({
 tag:'form'
,cls:'x-hidden'
,id:'form'
,params: cloneExportObject
 ,method: 'post'
,action:link
,target:'iframe'
,enctype: 'application/x-www-form-urlencoded'
,encoding: 'application/x-www-form-urlencoded'
});

var hiddenItem1 = document.createElement('input');
Ext.fly(hiddenItem1).set({
type: 'hidden',
value: cloneExportObject.securityId,
name: 'securityId'
});
form.appendChild(hiddenItem1);

var hiddenItem2 = document.createElement('input');
Ext.fly(hiddenItem2).set({
type: 'hidden',
value: cloneExportObject.uniqueSearchId,
name: 'uniqueSearchId'
});
form.appendChild(hiddenItem2);

form.dom.submit();
}
</code></pre>