View Full Version : center region displays only 1/3 page with panel bodycfg iframe tag

30 Mar 2011, 8:06 AM
I have a viewport with north, west, and center region. I'm trying to load the center region with an external php url which is defined in pan1, and the external php only gets displayed with 1/3 page in the center region, not taking the full page. I wonder if anyone has encountered such problem and knows the answer to fix the issue.

Below is my code:

For the viewport:
//Create our layout
var viewport = new Ext.Viewport({
layout:'border', //set the layout style. Check the Ext JS API for more styles
defaults: {
collapsible: false,
split: true
items: [{
region: 'north',
contentEl: 'north', //Get our content from the "north" div
margins: '5 5 0 5',
height: 60,
split:false //cannot resize this area
title:'View By:',
collapsible: true, //make this column collapsable
contentEl: 'west', //Get our content from the "west" div
margins: '5 0 5 5',
cmargins: '5 5 5 5',
width: 230,
minSize: 100, //set the limits for resizing
maxSize: 250, //set the limits for resizing
xtype: 'form',
labelWidth: 20,
items: radios
//title:'Main Content',
//collapsible: true, //make this column collapsable
contentEl: 'center', //Get our content from the "west" div
xtype: 'panel',
margins: '5 5 5 0',
height: '100%',

For the panel to display in center region:
var pan1 = new Ext.Panel({
renderTo: 'center',
title: 'Channell Outage Areas',
bodyCfg: {
tag: 'iframe',
width: '100%',
height: '100%',
cls: 'x-panel-body',
src: 'http://testbox/TS/test.php'}

Any help is appreciated.