PDA

View Full Version : Bad Performance/CPU Spike on Ext.Window show



brown-cow
10 Dec 2009, 8:21 AM
I'm hoping someone has experienced this before.

At some point in our large Ext application we open an Ext.Window. As soon as the window opens and until the window is closed, IE pegs the CPU. Firefox is a little better but it keeps the CPU pegged to about 20-30% until the popup window is closed. Here's a sample I've been working with:


var popupWin = new Ext.Window({
height: 500
, width: 1000
,items:{
html: 'Hello popup'
}
});

popupWin.show();


If I run this from a function within the larger app, I get the CPU spike while the window is open. However if I run this same code from a clean page, it doesn't happen. For the life of me I can't figure out what in my bigger app would be causing this crazy behavior.

Any ideas you might have would be very helpful.

Thanks.

10 Dec 2009, 8:28 AM
All of the work that needs to go in to make the window draggable, floatable, etc will do this in a heavy DOM application.

Does this happen in a vanilla page?

VinylFox
10 Dec 2009, 8:35 AM
You using any UX's? The Desktop example? IFrames in your page?

Anything out of the ordinary?

brown-cow
10 Dec 2009, 8:41 AM
This does not happen in a vanilla page.

On the page it is happening on, I have a parent Window that is sized to fit the bulk of the underlying page, with the exception of the header. I would have liked to used a viewport, but it didn't work out that way.

I am using a few UX's, the most prominent would probably be the RowExpander. In fact the window I'm opening originates in a double-click on a row in in the Grid with the RowExpander as a plugin.

babsjr77
10 Dec 2009, 9:01 AM
You could profile it in firebug and see if anything odd sticks out.

brown-cow
10 Dec 2009, 9:49 AM
Hey guys,

Thanks for the quick replies. I had done some testing with firefox and never could turn up anything there.

Here's what I found: it came down to a style that I was applying to the body of the page. Kinda cheesy, but what I was trying to do was have a progress image in the background of the page that would display until the Ext window opened over it. I did this with the following style:


#main_div {
margin:0;
padding:0;
min-height:400px;
background-image:url(../Images/ajax-loader.gif);
background-repeat:no-repeat;
background-position:center;
}


This worked fine and I thought since it's covered once the app rendered it's Ext panels etc. no biggie. And this worked fine, but when I open any window in the page, CPU spikes! What baffles me is why when I close the window, the CPU settles down again?

Here's the full page so you can reproduce it:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1"><title>

ExtTest

</title><link rel="stylesheet" type="text/css" href="/MyApp/Scripts/ext3.0.3/resources/css/ext-all.css" />
<script type="text/javascript" src="/MyApp/Scripts/ext3.0.3/ext-base-debug.js"></script>
<script type="text/javascript" src="/MyApp/Scripts/ext3.0.3/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/MyApp/Scripts/ext3.0.3/resources/images/default/s.gif';
Ext.SSL_SECURE_URL = '/MyApp/Scripts/ext3.0.3/blank.htm';
</script>

<script type="text/javascript">
var popupWindow = function(){
var popupWin = new Ext.Window({
height: 500
, width: 1000
,items:{
html: 'Hello popup'
}
});

popupWin.show();

};
</script>
<style>
#main_div {
margin:0;
padding:0;
min-height:400px;
background-image:url(MyApp/Images/ajax-loader.gif);
background-repeat:no-repeat;
background-position:center;
}
</style>
</head>

<body>

<div id="main_div">
<h2>ExtTest</h2>
<a href="javascript:popupWindow();">Popup</a>
</div>


</body>
</html>