It seems the main question at hand is, "How can I retrieve a DIV element within an IFRAME from its parent document?"
I'm unfamiliar with EXT JS syntax, but here's a simple JavaScript approach.
First, let's look at the document inside the IFRAME:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Child Document</title>
</head>
<body>
<h1>Child Document</h1>
<div id="stuff">
This div contains some text.
</div>
</body>
</html>
Now, let's move on to the parent document:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parent Document</title>
<style type="text/css">
#iframe {
width: 250px;
height: 250px;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<h1>Parent Docment</h1>
<form action="" method="get">
<p>
<input type="button" id="get-it" value="Get It" />
</p>
</form>
<iframe src="iframe.html" id="iframe"> </iframe>
<script type="text/javascript">
<!--
function getIt(){
var iframe = document.getElementById("iframe");
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var stuff = innerDoc.getElementById("stuff");
alert(stuff.innerHTML);
}
function init(){
document.getElementById("get-it").onclick = getIt;
}
window.onload = init;
// -->
</script>
</body>
</html>
The crucial line is this:
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
This allows you to access the IFRAME's document object and manipulate it as needed.