Layout of extjs page rendered inside iframe is intermittently messed up, due to conflict of Extjs element id

[GoogleCodeExporter]

What steps will reproduce the problem?
1. The attached file can be used to reproduce the problem.
2. Open main.html in IE, clicks "Add Tab" a few times. Since the problem is 
intermittent, we have to play around with it for a while.

What is the expected output? What do you see instead?
* Expected output: the file frame.html is loaded in a new tab with 6 fieldsets, 
each containing 3 textfields.
* Actual output: the page loaded inside the tab is totally messed up.

What version of the product are you using? On what operating system?
* version 1.3.1; but I believe it happens for other later versions as well.

Please provide any additional information below.
* I have investigated and found out that the reason seems to be at line 623, 
when the miframe caches the elements in the inside page, it generates a new id 
using the default function Ext.id(). This relies on the running sequence of the 
extjs engine of the parent page. Sometimes it generates an id that is duplicate 
with another element in the child page, and thus messed up the layout of the 
child page.

Original issue reported on code.google.com by Ryan.Ph...@gmail.com on 8 Aug 2011 at 3:23

Attachments:

• #miframe-bug.zip

[GoogleCodeExporter]

For now, a work around that I'm using is to hard-code the html elements of the 
child page with at least an id. As shown in file main-fixed.html in the same 
attachment, this mitigates the issue.

Original comment by Ryan.Ph...@gmail.com on 8 Aug 2011 at 3:25