View Full Version : Unable to access iframe in a Updated Content Panel

20 Apr 2007, 5:33 PM
Hi guys,

I have a LayoutDialog with BorderLayout, containing 2 panels - 1 with a form that controls a google map in the other panel of this layout. The google map is in an iframe, including some javascript functions that are being called from the control form. When I initialise the dialog for the first time, the contentpanels loads properly, and the function calls from panel1 to iframe functions works nicely. But then i close the dialog , and reopen it (there is a panel refresh through an updater that re-calls the mapiframe) , the function calls from control form no longer work although i can still see the iframe in the firebug html inspector..

Here are the code samples:

The dialog:

var MapDG = function(){
// everything in this space is private and only accessible in the HelloWorld block

// define some private variables
var dialog, showBtn;

// return a public interface
return {
init : function(){


showDialog : function(but_id,wrid){

showBtn = Ext.get(but_id);
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("mapping", {
title: "Mapping Wizard",
proxyDrag: true,
north: {
titlebar: false,
fitToFrame: true,
initialSize: 100,
center: {
titlebar: false,
fitToFrame: true
dialog.addKeyListener(27, dialog.hide, dialog);
map_layout = dialog.getLayout();
map_layout.add('north', new Ext.ContentPanel('map_navi', {scripts:true,url: "includes/map_navi.php?wrid="+wrid,title: 'Map Navigation'}));
map_layout.add('center', new Ext.ContentPanel('map_frame', {scripts:true,url: "includes/map.php?wrid="+wrid,title: 'Map'}));
//// #d4dff2
var panel=map_layout.getRegion('north').getPanel('map_navi');
var updater=panel.getUpdateManager();

var panel2=map_layout.getRegion('center').getPanel('map_frame');
var updater2=panel2.getUpdateManager();

} ,
autoResize: function(){
return this.width;

The map control form (map_navi.php):

<form name=mapnavform id=mapnavform action=../index.php onsubmit="javascript:return window.frames.mapframe.checkpoint();" style=margin:0px>

<table style="width:500px;font-size:12px;font-family:Tahoma;"><TR><TD rowspan=3 valign=top>
<b>Navigate to</b>:</td><TD rowspan=3 valign=top> <select name=sposition onchange="javascript: window.frames.mapframe.movemap(this.value)">
<option value="" >--select state--</option>

<option value=64.6875x33.9068955512887x12>Afghanistan</option>
<option value=15.46875x21.9430446624756x15>Africa</option>
<option value=20.01708984375x41.4591941833496x11>Albania</option>
<option value=1.7578125x29.228889465332x13>Algeria</option>
<option value=1.5820300579071x42.573299407959x9>Andorra</option>
<option value=17.40234375x-10.6606079536248x14>Angola</option>

</select></td><TD valign=top><B>Lattitude:</b></td><td valign=top><input name=lat size=5></td></tr>
<tr><TD valign=top><B>Longtitude:</b></td><td valign=top> <input name=longt size=5></td></tr>
<TR><TD valign=top><B>Zoom:</B></td><td valign=top><input size=1 name=zoomlev value=''></td><td valign=top>&nbsp;<input type=button value="Show" onclick="javascript: window.frames.mapframe.initmap(document.mapnavform.longt.value,document.mapnavform.lat.value,document.form.zoomlev.value,document);"></td> </tr>

<input type=hidden name=table value='wri_mod_recs'>
<input type=hidden name=id_name value='wrid'>
<input type=hidden name=id value='<?=$wrid?>'>
<input type=hidden name=op value="save_rcm_pos">
<input type=hidden name=position value="">

I'm guessing it has something to do with accessing through window.frames.mapframe, but i'm not sure how to do it different way.. :-/ i tried Ext.get('mapframe').functionname() , but that didn't work for me..

Thanks in advance


20 Apr 2007, 7:18 PM
This is how I'm referencing iframes:

ifname= Ext.get("iframe-name-here");
ifname= ifname.dom;
ifname.src = imglink;

You may be able to shorthand this to a single line haven't tried it yet.