PDA

View Full Version : How to load a page into a tabpanel



rookie007
17 Sep 2009, 3:38 AM
Hi,
I have a tabpanel in a window. and I want to load another page into the tabpanel(whole page),I tried autoload,but it seems not work,so I used iframe markup,well,it loads the page correctly,but a problem comes upon:memory leak (In IE 6.0 and IE7.0)

can anyone help me ?

here is my code:
window.js :


var win;
var button = Ext.get('click-btn');
button.on('click', function() {

if (!win) {
var frameConf = {
tag : 'iframe',
id : 'frame1',
frameBorder : 0,
width : '100%',
height : '100%'
};

win = new Ext.Window({
layout : 'fit',
width : 500,
height : 200,
closeAction : 'close',
plain : true,
items : [new Ext.TabPanel({

id : 'tabs',
autoTabs : true,
activeTab : 0,
closable : true,
deferredRender : false,
border : false,
items : [{
title : 'jsp page1',
closable : true,
id : 'tab-1'
}, {
closable : true,
title : 'jsp page2',
id : 'tab-2'
}]
})]
,
buttons : [{
text : 'OK'
}, {
text : 'close',
handler : function() {
win.close();
}
}],
listeners : {
'beforeclose' : function (){
iframe.src = 'about:blank';
iframe = null;
win = null;
//CollectGarbage();
}
}
});
win.show();
var iframe = Ext.DomHelper.append(Ext.getCmp('tab-1').body, frameConf);
iframe.src = 'pages/test/simple.jsp';

}
});




'pages/test/simple.jsp' page include a <div id="ExtDiv">

pages/test/simple.js:


Ext.onReady(function(){
new Ext.Panel({
width:300,
height:400,
frame:true,
title:'welcome',
renderTo:'ExtDiv'
});
});

17 Sep 2009, 5:06 AM
IFrames are the only way to do it.

rookie007
17 Sep 2009, 5:56 AM
IFrames are the only way to do it.
thx for reply
I wonder is there a way to solve the problem with memory leak ?thx!!:)

17 Sep 2009, 6:03 AM
hard to tell. i'm not a fan of iframes at all. I think this may be an issue of IE6/7 and iframes more than anything.

I would suggest trying the ManagedIframe plugin/extension to see if Doug Hendrics was able to mitigate that problem.

rookie007
18 Sep 2009, 7:03 AM
I would suggest trying the ManagedIframe plugin/extension .

I have tried that ,however, the problem is still

hendricd
19 Sep 2009, 8:33 AM
@rookie007 -- Although ManageIFrame offers much more in terms of functionality, you can accomplish the basics this way also:


var win;
var button = Ext.get('click-btn');
button.on('click', function() {

var win = Ext.getCmp('appwin') || new Ext.Window({
layout : 'fit',
width : 500,
height : 200,
id : 'appwin',
closeAction : 'close',
plain : true,
items : [new Ext.TabPanel({

id : 'tabs',
autoTabs : true,
activeTab : 0,
closable : true,
deferredRender : false,
border : false,
items : [{
title : 'jsp page1',
closable : true,
id : 'tab-1',
ref : '././iframe',
bodyCfg : {
tag : 'iframe',
frameBorder : 0,
style : {overflow : 'auto'},
src : 'pages/test/simple.jsp',
width : '100%',
height : '100%'
}
}, {
closable : true,
title : 'jsp page2',
id : 'tab-2'
}]
})]
,
buttons : [{
text : 'OK'
}, {
text : 'close',
handler : function() {
win.close();
}
}],
listeners : {
'beforedestroy' : function (){
this.iframe.body.dom.src = Ext.SSL_SECURE_URL //or 'javascript:void()'
}
}
});

win.show();
});

rookie007
24 Sep 2009, 10:11 PM
@rookie007 -- Although ManageIFrame offers much more in terms of functionality, you can accomplish the basics this way also:


thx for reply.
I have tried what you said,but there are still memory leaks .

I wonder why such simple case will cause memory leak?Did I do the wrong way?

hendricd
25 Sep 2009, 12:09 AM
That would depend on many factors. How do you know its leaking versus orphaned DOM references?
Is it the page loaded in the frame that's doing it?

Is this IE only?
Have you tried analyzing with sIEve or Drip?

Try to re-use your Ext.Window and iframe. Transparent PNG is expensive as well.

Ext 3 Memory Management tweaks are still ongoing as well.

rookie007
25 Sep 2009, 12:47 AM
Have you tried analyzing with sIEve or Drip?


In fact , I am new to Ext .when I observed with sIEve , I got a ton of leaks.Even the simplest case as above ,there are still memory leaks.

When the page loaded does not contain any Ext code ,There is no leaks at all.
I have no idea what should I do now ? thx for reply!!
PS:Sorry for poor english( :) )