PDA

View Full Version : problem with adding a new tab with an iframe dynamically



FlaminPhoenix
9 Jun 2010, 11:37 PM
var childTab = parent.document.createElement("<div id='div"+ ID+"' class='x-hide-display'><iframe src='" + "Index.asp?PID=" + ID+"' style='width:100%;height:100%'></iframe></div>");
parent.document.appendChild(childTab);
var topTab = parent.Ext.getCmp("Main").add({
title: name,
closable:true,
applyTo:"div"+CPID//tried contentEl too..
});
parent.Ext.getCmp("Main").setActiveTab(topTab);
parent.Ext.getCmp("Main").doLayout();
The above opens up a tab with nothing in where the actual document used to be.. The iframes document contains extcode only in a JS file, and nothing in the html body. The JS refuses to execute with the above. I know this because if I add any text in the body , I get it in the new tab, but even a simple JS alert refuses to execute .. how do I get the JS to execute ?

swarnendude
9 Jun 2010, 11:46 PM
var newTab = new Ext.Panel({
title: 'New Tab',
closable: true,
layout: 'fit',
bodyCfg: {
tag: 'div',
cls: 'x-panel-body',
children: [{
tag: 'iframe',
name: frameName,
src: 'http://www.google.com',
frameBorder: 0,
width: '100%',
height: '100%',
style: {
overflow: 'auto'
}
}]
}, region: 'center'
});


var TabPanel = new Ext.TabPanel({
activeTab: 0,
enableTabScroll: true,
resizeTabs: true,
animScroll: true,
scope: this,
items: [{
title: 'First Tab'
}]
});

TabPanel.add(newTab);

Animal
9 Jun 2010, 11:50 PM
It's even simpler:



var newTab = new Ext.BoxComponent({
title: 'New Tab',
closable: true,
autoEl: {
tag: 'iframe',
name: frameName,
src: 'http://www.google.com/',
frameBorder: 0,
style: {
border: '0 none'
}
},
region: 'center'
});

swarnendude
9 Jun 2010, 11:52 PM
True.

FlaminPhoenix
10 Jun 2010, 12:24 AM
when I use animals code to add to a tab as follows:



var newTab = new Ext.BoxComponent({
title: 'New Tab',
closable: true,
autoEl: {
tag: 'iframe',
name: 'newFrame',
src: 'http://www.google.com/',
frameBorder: 0,
style: {
border: '0 none'
var newTab = new Ext.BoxComponent({
title: 'New Tab',
closable: true,
autoEl: {
tag: 'iframe',
name: 'newFrame',
src: 'http://www.google.com/',
frameBorder: 0,
style: {
border: '0 none'
}
}
//region: 'center'
});

parent.Ext.getCmp("extETLTabPanelMain").add(newTab);



I get an error: 'dom' is null or not an object

what am I doing wrong?

EDIT:I get the same error with both swaren, as well as animals code.. the error pops up when i click on the created tab...

swarnendude
10 Jun 2010, 12:27 AM
Please format code properly. Go to this site : http://jsbeautifier.org/, beatify the script and paste it here.

Animal
10 Jun 2010, 12:28 AM
How have you debugged?

steffenk
10 Jun 2010, 12:59 AM
Please format code properly. Go to this site : http://jsbeautifier.org/, beatify the script and paste it here.

this is a forum bug with tabs inside [code] tags, already reported but never fixed. Use php tags and it's displayed ok.

FlaminPhoenix
10 Jun 2010, 1:03 AM
How have you debugged?

on error, I inspected the JS code and I can see that the ct.dom.insertBefore(this.el.dom, position); within the onRender handler in the ext code is getting "this.el.dom" object, and everything within.. still am not clear why ext throws up the error even though its getting the object...

Animal
10 Jun 2010, 1:06 AM
So this.el.dom is not defined? ct.dom is not defined?

So go back through the call stack and see why.

FlaminPhoenix
10 Jun 2010, 1:08 AM
actually, ct is null..

Animal
10 Jun 2010, 1:09 AM
You're diong somethnig weird.

I just ran



var newTab = new Ext.BoxComponent({
title: 'New Tab',
closable: true,
autoEl: {
tag: 'iframe',
name: 'newFrame',
src: 'http://www.google.com/',
frameBorder: 0,
style: {
border: '0 none'
}
}
});
tp.removeAll();
tp.add(newTab);
tp.setActiveTab(newTab);


And it worked.

But google busted out of the frame and took over the page after about 0.5 of a second, so you're onto a loser trying to put that into an iframe.

FlaminPhoenix
10 Jun 2010, 1:14 AM
wierd indeed.. i tried the same code you pasted, and got a "permission denied" error..even for a relative path!! how does that addup?!

if it matters at all: im actually using 2 divs with class="x-hide-display" for the initial 2 tabs.. and within those divs i have my iframes..and the tabpanel is actually being "rendered to" a div above it whose closing tags dont enclose the divs with the class="x-hide-display"

EDIT:c.render(target, position); is the statement in "renderItem" function that I get this error on

Animal
10 Jun 2010, 1:58 AM
It does matter that your doing things weirdly. Don't.

FlaminPhoenix
10 Jun 2010, 2:02 AM
lemme try the same code on the first two tabs, or with the tabpanel empty..ill post back here in the next 30 mins.

swarnendude
10 Jun 2010, 2:04 AM
You are accessing parent from an iframe. It gives permission denied error sometimes. Can you tell what exactly are you trying to achieve?

FlaminPhoenix
10 Jun 2010, 2:12 AM
Im trying to open a new tab in the tab panel on click of a ext gridpanel cell.. To do this, Im getting the element by id, and calling add..

EDIT: ok, animal and swaren, there is nothing wrong with the code you both shared.. i made my panel get its tabs by adding it your way, and not mine (by using divs with a class set to x-...) now im sure im doing something wrong when i call the parent tabpanel to add the tab.. I know Im close to figuring it out, but it still eludes me.

Animal
10 Jun 2010, 2:25 AM
Don't do your weird thing!

"getting the element by id, and calling add.."

That indicates a misunderstanding.

An element is not an Ext Component. You can't add to it, and you can't add it to a Container (eg a TabPanel. A TabPanel isa Container)

You can get a Component using Ext.getCmp()

FlaminPhoenix
10 Jun 2010, 2:52 AM
Like I posted before, Im actually adding by calling parent.Ext.getCmp("id_of_ext_tabpanel_component").add(tab_obj).. but this statement is in the iframe..

If you were to add a tab from the iframe to the container frames' tabpanel, how would you go about doing it animal?

swarnendude
10 Jun 2010, 2:55 AM
You need to load Ext Javascript and css files inside iframe in order to use Ext library from that iframe.

Animal
10 Jun 2010, 3:03 AM
You can't work cross-frame.

FlaminPhoenix
10 Jun 2010, 3:09 AM
@swaren:i have an ext grid in my iframe, so Im including ext js files and css files in it alright.. like i said before, if I run the frame in a seperate window, with no frames, it works perfectly well.

@UPDATE:I tried adding a function in the parent that adds the tab, and calling the function in the child iframe.. I get the same "dom" is null or not an object error.. By now, animal I have removed all the "wierd" part I was doing, what Im doing now this should be considered perfectly normal isnt it?

@animal: How would one go about adding a tab from an iframe which is the content of another tab? Is there no workaround for this? Its only on render that this error occurs..

@ANOTHER UPDATE: Now, after the error appears, and I hit "dont debug" the javascript code executes, but still no grid render!! I have a couple of alerts in the first few statements, which appear fine, but still no grid in sight..have to debug further

Animal
10 Jun 2010, 3:10 AM
No idea, can't see your page. But you are doing something wrong obviously.

FlaminPhoenix
10 Jun 2010, 3:44 AM
ok, ive finally thrown up my hands and decided that the effort isnt worth the end result. As the im using grid is but extended, I can use the same inside the parent frame.. thanks for your time and effort everyone..

Animal
10 Jun 2010, 3:49 AM
There's no reason for using an iframe.

if you want to put a grid in a TabPanel, put a grid in a TabPanel.

FlaminPhoenix
10 Jun 2010, 9:15 PM
Just looking back at your earlier reply about google popping out and occupying the whole window , animal, itseems google is able to manipulate the parent windows location from within an iframe..