PDA

View Full Version : MonitorResize for IFrame inside TabPanel



woeisiong
12 Jul 2009, 10:17 PM
I had a main page which contain a TabPanel to load IFrame Page. When the page be loaded, it look like following screen:
http://www.geocities.com/woei_siong/Sample1.png
The 2nd Panel is not being render properly. It only render correctly after I resize my IE as follwing:
http://www.geocities.com/woei_siong/Sample2.png

The following contain the code for the IFrame


Ext.onReady(function() {
Ext.QuickTips.init();
new Ext.Viewport({
items: [
new Ext.Panel({
border: false,
frame: true,
items: [
new Ext.grid.EditorGridPanel({
anchor: '99% 49%',
bbar: [
{
handler: function() { addNewRspWindow.show(); },
text: 'Add RSP',
xtype: 'tbbutton'
},
'->',
{
handler: function() { saveChanges(stRsp, 'rsp', 0); },
text: 'Commit Change',
xtype: 'tbbutton'
}
],
cls: 'rowPanel',
columns: [
new Ext.grid.RowNumberer(),
{ dataIndex: 'Code', header: 'Name' },
{ dataIndex: 'Description', header: 'Description' },
new Ext.grid.BooleanColumn({
align: 'center',
dataIndex: 'Status',
falseText: '<img src="../../icons/delete.png" />',
header: 'Status',
trueText: '<img src="../../icons/accept.png" />'
}),
{ align: 'center', dataIndex: 'Id', header: 'Details', renderer: function() { return '<img src="../../icons/application_view_detail.png" />'; } }
],
frame: true,
monitorResize: true,
sm: new Ext.grid.CellSelectionModel({
listeners: {
cellselect: {
fn: function(sm, rowIndex, colIndex) {
if (sm.grid.getColumnModel().getDataIndex(colIndex) != 'Id')
return false;
if (stRoles.getAt(rowIndex).get(sm.grid.getColumnModel().getDataIndex(colIndex)) == 0) {
Ext.Msg.alert('New Rsp', 'Please commit the change for new RSP')
return false;
}

currentRspId.setValue(stRoles.getAt(rowIndex).get(sm.grid.getColumnModel().getDataIndex(colIndex)));

stBranch.reload({
params: {
ParentId: currentRspId.getValue()
}
});
}
}
}
}),
store: stRsp,
title: 'RSP',
viewConfig: {
forceFit: true
}
}),
new Ext.grid.EditorGridPanel({
anchor: '99% 49%',
bbar: [
{
text: 'Add Branch',
xtype: 'tbbutton'
},
'->',
{
text: 'Commit Change',
xtype: 'tbbutton'
}
],
cls: 'rowPanel',
columns: [
new Ext.grid.RowNumberer(),
{ dataIndex: 'Code', header: 'Name' },
{ dataIndex: 'Description', header: 'Description' },
new Ext.grid.BooleanColumn({
align: 'center',
dataIndex: 'Status',
falseText: '<img src="../../icons/delete.png" />',
header: 'Status',
trueText: '<img src="../../icons/accept.png" />'
})
],
frame: true,
monitorResize: true,
sm: new Ext.grid.CellSelectionModel({
}),
store: stBranch,
title: 'Branch',
viewConfig: {
forceFit: true
}
})
],
layout: 'anchor',
})
],
layout: 'fit',
monitorResize: true
})
});


I wonder is there any config I miss out cause the above issue.

Condor
12 Jul 2009, 10:30 PM
1. Why are you using an IFRAME? If you are loading an Ext config you are better off using LiteRemoteComponent (http://extjs.com/forum/showthread.php?t=18023).
2. You didn't post the config you use to embed the IFRAME in the tabpanel.

woeisiong
12 Jul 2009, 10:42 PM
The following is the code for TreePanel


var treeMenu = new Ext.tree.TreePanel({
border: false,
dataUrl: 'main.ashx?action=applicationMenu',
height: 300,
iconCls: 'icon-application_go',
id: 'appMenu',
listeners: {
beforeclick: function (node, e) {
if (!node.isLeaf()) return true;

var tab = tbMain.getComponent(node.attributes.id);
if (!tab || tab.hidden) {
tab = tbMain.add({
autoLoad: {
maskMsg: 'Loading ' + node.attributes.text + '...',
mode: 'iframe',
params: { url: node.attributes.href },
scripts: true,
showMask: true,
url: 'handler/PageLoader.ashx'
},
bodyStyle: 'background: #ffffff;',
border: false,
closable: true,
deferredLoad: true,
id: node.attributes.id,
title: node.attributes.text
});
}
tbMain.setActiveTab(tab);
return false;
}
},
minHeight: 300,
region: 'north',
root: {
expanded: true,
id: '0',
nodeType: 'async'
},
rootVisible: false,
title: 'Application Menu'
});


Backend Code


Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
Dim pageURL As String = context.Request("url")
Dim strHTML As String = "<iframe height='100%' width='100%' frameborder='0' src='" & pageURL & "'></iframe>"
context.Response.ContentType = "text/html"
context.Response.Write(strHTML)
End Sub


My backend will return the iframe to autoLoad instead of whole page.

Condor
12 Jul 2009, 10:51 PM
I would have used:

tab = tbMain.add({
id: node.attributes.id,
title: node.attributes.text,
closable: true,
xtype: 'box',
autoEl: {tag: 'iframe', src: node.attributes.href, cn: [
{cls: 'loading-indicator', cn: 'Loading ' + node.attributes.text + '...'}
]}
});
1. No need for the server to add an IFRAME.
2. IFRAME is part of the Ext layout, so it is sized automatically.

woeisiong
12 Jul 2009, 11:18 PM
Still the same. It render the the 2nd GridPanel out of screen like the 1st picture I post. Just realize, if I manually trigger the Internet Browser Window Size, it work fine for all tab even the tab is added later.

Condor
13 Jul 2009, 12:06 AM
There is a bug in Ext.onReady for frames in IE.

The fix can be found in the Feature Requests section.

woeisiong
13 Jul 2009, 6:48 PM
I had tried it for IE8, FireFox3, and Safari. All have the same result. The 2nd Grid Panel is rendered out of screen if no resize event be triggered.