PDA

View Full Version : Center of viewport doesn't always display under heavy load



aagocs
29 Sep 2010, 6:31 AM
I have a complicated application that will function correctly most of the time. Under heavy load, the center panel will *sometimes* not display. If you resize the window -- everything is fine. I have tried catching several events and calling viewport.doLayout() or changing the active tab to force a layout.

To see where the issue might be, I created a test case -- a simple viewport, borderlayout which autoLoads html from a file. This again, will work most of the time. If I deploy it to a heavily loaded system, or run it from a browser on a resource constrained system, the center panel will not load maybe 10% of the time.
Fails most repeatedly with chrome, but will fail with firefox as well (not sure about IE)

22617 22616


jsp file


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<title>User Home</title>

<script language="javascript" type="text/javascript" src="script/ext/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="script/ext/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="script/testViewport.js"></script>

<link rel="stylesheet" type="text/css" href="script/ext/resources/css/ext-all.css"/>
<style type="text/css">
.x-column-inner .x-panel-body {
background-color: #dfe8f6;
}
</style>
</head>
<body>

<div id="content">
<div id="nav-landing"> </div>
<div id="content-landing"> </div>
</div>

<!--end content area-->


</body>
</html>

viewport file


Ext.onReady(function(){
Ext.QuickTips.init();

var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
//bufferResize: 200,
autoShow: true,
//monitorResize: true,
// forceLayout: true,
// layoutOnCardChange: true,
bodyStyle:'background-color:pink;',
autoLoad: 'centerTest.html'
};

var topPanel = {
region: 'north',
id: 'topPanel-id',
xtype: 'panel',
height: 95,
border: false,
autoLoad: 'topTest.html'
};

var westPanel = {
region: 'west',
xtype: 'panel',
id: 'west-id',
header:false,
split: true,
width: 160,
minSize: 120,
collapsible: true,
border: false,
collapseMode: 'mini',
autoHeight: true,
autoLoad: 'leftTest.html'
};

var viewport = new Ext.Viewport({
layout: 'border',
id: 'viewport-id',
renderTo: 'content',
forceLayout: true,
monitorResize: true,
items: [
topPanel,
westPanel,
contentPanel,
{
region: 'south',
xtype: 'panel',
height: 20,
autoLoad: 'bottomTest.html'
}]
})
},
{single : true, delay : 750});
example of one of the html files to fill the regions


<style>
.bodyC{
background-color:green;
padding:10px;
height: 400px;
}
</style>

<div class="bodyC">
<br />
<h1>
Center Page
</h1>
<br/>
<p>
CONTENT
<br/>

</p>

</div>

devtig
14 Nov 2010, 1:53 AM
Why do you have

{single : true, delay : 750}
as the second parameter of Ext.onReady? options are Ext.onReady's third.

pete7au
19 Nov 2010, 5:04 AM
Bump!