Controlling Window size and position.

[edovale]

Hello there,
I am fairly new to extjs and having some problems positioning and sizing a Window on the view port. Here is the code that creates the window.


function showDiagram(diagramId){

if (!diagramWindow){
diagramWindow = new Ext.Window({
title: 'Drag mouse over parts for options.',
width:'auto',
renderTo: 'diagramHolder',
closeAction:'hide',
layout: 'fit',
buttons: [{
text:'Close',
disabled:false,
handler: function(){diagramWindow.hide();}
}],
modal: true
});
}

updater = diagramWindow.getUpdater();
updater.update({
url: DiagramsOptions.DIAGRAM_URL,
params: {'diagram': diagramId},
callback: function(){
diagramWindow.doLayout();
diagramWindow.center();
diagramWindow.show();
}
});
}
This function gets called when the user clicks on a row in a table representing the diagram. I want to display the diagram inside a modal window and I want this window to resize it self to fit the diagram( a diagram is just a plain image) and to center it self in the view port.

Here is the markup on top of which the window is rendered:



<%@ include file="../common/taglibs.jsp"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>

<link href="<c:url value="/styles/forms.css"/>" rel="stylesheet" type="text/css"/>
<link href="<c:url value="/styles/search.css"/>" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="<c:url value="/scripts/searchByDiagrams.js"/>"></script>

<script type="text/javascript">

var DiagramsOptions = {
LIST_DIAGRAMS_URL: '<c:url value='/diagramsSearch/listDiagrams.htm'/>',
DIAGRAM_URL: '<c:url value='/diagramsSearch/diagram.htm'/>'
};

</script>

<div id="advancedSearch">
<div id="searchBody">
<c:url var="actionUrl" value='/diagramsSearch/onFilterChanged.htm'/>
<div id="searchOptions">
<%@include file="/WEB-INF/pages/diagrams/searchByDiagramsFilters.jsp"%>
</div>
<div id="searchResults" >
<%@ include file="/WEB-INF/pages/diagrams/diagramsList.jsp" %>
</div>
</div>
</div>

<div id="diagramHolder" style="visibility: hidden;"></div>

The above is a jsp page that gets wrapped by templates that apply some more markup to it. In essence I just want to render the window inside 'diagramHolder' div.

And this is the response I am getting from the server:



<img src="/eSpare.ui/images/diagrams/Picture 003.jpg" id="diagramImg" alt="Diagram 3 for LX-300"/>

What I am getting is different in IE and firefox. In firefox I get a modal window with no diagram on it and the window spans for the whole width of the screen and half the height of it. I am not able to see the title bar.
In IE the window shows up in the upper left corner of the screen; again not title bar.

Can anyone point me out in the right direction to get this working.