Problems with Internet Explorer

[djfloetic]

I've been trying to simply have a BorderLayout from a div.

I've been success with Firefox but not in Internet Explorer 6/7.

Here's the js file:


Ext.onReady(function() {
BCDBLayout = function(){
return {
init : function(){
var layout = new Ext.BorderLayout(Ext.get('class-container'), {
east: {
split: false,
initialSize: 265,
autoScroll: false,
titlebar: true,
collapsible: false,
minSize: 100,
maxSize: 1000
},
center: {
split: false,
initialSize: 735,
titlebar: true,
collapsible: false,
minSize: 400,
maxSize: 1000
}
});

layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('bcdbview-main-class', {title: 'BCDB', fitToFrame:true, closable:false}));
layout.add('east', new Ext.ContentPanel('bcdbview-details-class', {title: 'Details', fitToFrame:true}));
layout.endUpdate();
}
};
}();
Ext.EventManager.onDocumentReady(BCDBLayout.init, BCDBLayout, true);

I'm attaching the border to a div I've created:


<script type="text/javascript" src="./includes/javascript/classDBView.js"></script>
<div id="class-container" style="border:0px none;overflow:overflow;width:100%;height:100%">
<div id="bcdbview-main-class" style="border:0px none;overflow:overflow;width:100%;height:100%">
<div id="bcdbview-grid" style="border:0px none;overflow:overflow;width:100%;height:100%"></div>
</div>
<div id="bcdbview-details-class"">
<table cellspacing="0" id="details-table" width="265">
//... stuff
</table>
<div id="details-form"></div>
</div>
</div>

In FireFox everything is okay with no reported errors in FireBug. In IE, it doesn't show anything. Although I can see it is trying to render the grid but it doesn't show.

If I replace it with "document.body" instead of "Ext.get('class-container')" it works, but I don't want that since it will take over the body and create the layout over anything below the Body which is not desirable.

Any thoughts?

[tryanDLS]

Please search before posting, read the doc and look at tutorials - this has been covered many times. From the doc http://extjs.com/deploy/ext-1.1-rc1/docs/output/Ext.BorderLayout.html



The container the layout is rendered into can be either the body element or any other element. If it is not the body element, the container needs to either be an absolute positioned element, or you will need to add "position:relative" to the css of the container. You will also need to specify the container size if it is not the body element.

[djfloetic]

Thanks for the swift reply, I guess I wasn't clear.

Sure I can set a fixed size for it, but if I do then it'd be fixed. I'd like it to have it autoheight to 100% of the div.

Any idea as to how I can somehow find out the max height of the parent div and maximize to it?

[eseguin3]

I'm looking for the same answer. I was having essentially the smae problem, and sort-of solved it by setting a fixed height of the div. I need to find a way to get around using a fixed height, and nothing I've tried has worked. Have you had any luck with this? Or...does anyone else know what to do about it?

[eseguin3]

Actually, I think I found a slightly more acceptable solution.

In my js file:


if (Ext.isIE) {
Ext.get('div').dom.style.height = Ext.get('parent').getHeight(true) + 'px';
}

This way, Ext will set the height of the element to whatever the size of its parent element (or whatever element you choose, really) is.

This works well unless you're in IE in a non-maximized window when you load the element. Then, when you maximize the window, it will not update the size of the element, and it looks terrible. If there was an Ext.on('resize', function()) type event, it would be pretty easy to make a work-around, but I'm not familiar with such method. Or, maybe there's a better way to do this all together...I'm not sure. Just thought i'd post my "fix"

[DigitalSkyline]

Could you possibly use fitToParent?
http://extjs.com/deploy/ext/docs/output/Ext.Element.html#fitToParent

[eseguin3]

Ah, there we go. That fixed it for me. Thanks!