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

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">
<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;

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

<!--end content area-->


viewport file


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,
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',
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: [
region: 'south',
xtype: 'panel',
height: 20,
autoLoad: 'bottomTest.html'
{single : true, delay : 750});
example of one of the html files to fill the regions

height: 400px;

<div class="bodyC">
<br />
Center Page



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.

19 Nov 2010, 5:04 AM