PDA

View Full Version : How to remove iframe element from DOM?



Romick
14 Jul 2012, 1:47 PM
Hi!

I cant remove component with iframe inside. I have tried all possible ways:
1) Ext.fly(frameId).remove();
2) Ext.removeNode(Ext.fly(frameId));
3) Ext.getCmp(frameId).destroy();

But seems nothing get work. Click add remove few times.
Simple test case you can find here: http://jsfiddle.net/XuQg4/12/

debabrata
15 Jul 2012, 10:01 PM
If i am giving a static id to the component and destroying the component then it is working.


Ext.onReady(function() {
var win = Ext.create('Ext.Window', {
text: 'Click to Select Date format',
renderTo: Ext.getBody(),
width: 312,
height: 200,
autoShow: true,
tbar: [{
text: 'Add IFRAME',
handler: function(){
win.frameId.push(Ext.id());
var frame = Ext.create('Ext.Component', {
width: 100,
height: 100,
id: 'kk',
autoEl: {
tag: 'iframe',
src: 'http://www.google.com'
},
style: 'background-color: yellow;'
});
win.add(frame);
}
},{
text: 'Remove IFRAME',
handler: function(){
// //var frameId = win.frameId.pop();
// var frame = Ext.fly(frameId).dom;
// if (frameId){
// //Ext.fly(frameId).remove();
// Ext.removeNode(frame);
// }
Ext.getCmp('kk').destroy();
}
}]
});


win.frameId = [];
});

Romick
16 Jul 2012, 1:22 AM
Hi debabrata!
I have tried this and seems it works!
I was trying to find the most efficient method to remove iframe from dom. I was thinking that Ext.fly is better (less weight) than Ext.getCmp(). But some some how fly() is not working, but getCmp () is!
Anyway thank you!

jcdang
16 Jul 2012, 6:19 AM
It's difficult to understand what you're trying to do based on your title and posted content.

This will remove the item from the win component and by component-dom relation the DOM element itself:

win.remove(frameId);

Romick
16 Jul 2012, 6:38 AM
Hi sorry for unclear explanation.
It's because when I inspect with FireBug there is no Component at all. And using autoEl make component. And this component is Iframe. I mean this component have frame Id and it is the iframe. And I have question why Ext.removeNode(frame.dom) didn't remove this Iframe from DOM.

redraid
16 Jul 2012, 7:08 AM
You need to remove component not iframe dom, component removes all owned dom on destroy
http://jsfiddle.net/Sv92h/

jcdang
16 Jul 2012, 9:41 AM
Hi sorry for unclear explanation.
It's because when I inspect with FireBug there is no Component at all. And using autoEl make component. And this component is Iframe. I mean this component have frame Id and it is the iframe. And I have question why Ext.removeNode(frame.dom) didn't remove this Iframe from DOM.

Here is an example without using any Ext Component wrapper objects.
http://jsfiddle.net/XuQg4/19/

Romick
16 Jul 2012, 11:34 PM
Thank you!
All examples are working great. As I can see Ext.removeNode() works when you create element using dom (document.createElement('iframe')), but when you create it inside component it wouldn't work.
Solved!