Uncaught Error: DOM element with id x in Element cache is not same as element in DOM

[sujam]

I've the following code in UI on the button Click event, which is returning an MS-Excel file. It works perfectly in first try but, return the following error after second, third and .... clicks.

Any suggestions, how can I get rid of it?

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()"

{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();}

Thanks!

[hakimio]

You are adding multiple elements with same IDs. Reuse existing elements or remove the old ones before creating new.

[sujam]

Thanks, I tried the destroy() method but, it's not working. do you know which one to remove exactly and how? a small code snippet would be really helpful.

Thanks!

[hakimio]

var frame = Ext.get('iframe') ||  body.createChild(..);

[sujam]

Thanks, but it's not working.

[hakimio]

Create a Sencha fiddle to show what's exactly not working.