PDA

View Full Version : Spacing Issue in IE6 with border layout



mrkadakia
10 Jul 2009, 7:27 AM
Hi all -
I am using the following code in Ext 2.2:


// Global variables
var viewPort = null;

// Create namespace
Ext.namespace('testLayout');

// Create application
Ext.onReady(function() {

// Private variables
var browseTree;
var homeNode;
var defaulttab;


viewPort = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
title: 'Test Layout'
},{
region:'west',
title: 'Model Browser',
collapsible: true,
split:true,
width: 300,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:0,
tabPosition:'bottom',
items:[{
title: 'Explorer',
xtype: 'treepanel',
id: 'browseTree',
autoScroll:true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode(explorerData),
rootVisible: true
}, {
html: '<table cellspacing="10"><tr><td>Enter the text to be searched:</td></tr><tr><td><input type="text" name="searchText" id="searchText" value="" size="30"/></td></tr><tr><td><input type="submit" name="submitSearch" id="submitSearch" value="Search" /></td></tr></table>',
title: 'Search',
autoScroll:true
}]
})
},{
region: 'center',
layout: 'border',
items:[{
xtype: 'tabpanel',
region: 'center',
id: 'tabs',
width:'auto',
height: 'auto',
minTabWidth:115,
tabWidth:220,
resizeTabs: true,
enableTabScroll:true,
activeTab: 0,
items: {
title: 'Node1',
id: 'Node1',
closable:true
}
}, {
region: 'south',
title: 'Information',
height: 250,
html: 'Information will be shown here.',
collapsible: true,
split:true
}
]
}
]
});

browseTree = viewPort.findById('browseTree');
homeNode = browseTree.getNodeById('Node1');
homeNode.select();

defaulttab = viewPort.findById('Node1');
});

I see a block of whitespace (code is highlighted at the top) between the NORTH region of the VIEWPORT and the WEST/CENTER region of the VIEWPORT in INTERNET EXPLORER 6.

I have attached a screenshot in the ZIPPED folder. It looks fine in Firefox.

I am trying to maintain the same look in both IE and Firefox.

Any assistance will be appreciated.

Thanks

tryanDLS
10 Jul 2009, 7:33 AM
North/South regions must have height, East/West must have width.

mrkadakia
10 Jul 2009, 7:43 AM
Hi tryanDLS,
Perfect! Putting height: 0 in the NORTH region helped me resolve the spacing issue. Updated code is:


{
region: 'north',
title: 'Test Layout',
height: 0
}

Thank you.