Function Not Defined

Hi,

I am getting an error saying the function "showListDetail " is not defined when it appears to be.  I am getting an error when the code this my "setTimeout" function where I am trying to get the code to wait.

I am using two external libraries, one is scriptaculous and the other is extjs.  In any case, I think my problem is not related to my usage of these libraries rather than a syntax error in my js code.  I have a data grid to display a list of records.  I am trying to allow the user to click a button or a row or whatever it may be from within the grid and have the  main datagrid fade out, and then the detail drill down view fade in.  I can get the div to fade out just fine using "Effect.Fade" which is from Scriptaculous but I am having trouble getting it to fade in smoothly.  

I have the following code that gets called from a button on the page.  :

Effect.Fade('divList', { from: 1.0, to: 0.0, duration: 0.7 });

var p = new Ext.Panel(
  {
   title: 'ListDetail View',
  collapsible: true,
  renderTo: 'divListDetail',
  width: 400,
  html: 'test html goes here, blah, blah, lorem ipsum',
  frame:true,
  hidden:false
 }
);
            
/* code should wait 700 milliseconds then execute the showListDetail function*/
setTimeout("showListDetail ()", 700 );
            
var showListDetail = function() {
 $('divListDetail').show();
}

<!-- This is the main list -->
<div id="divList">
<img src="images/Main_Listings.gif" /><br/><br/>
</div>

<!-- This is the detail div and its hidden by default -->
<div id="divListDetail" style="display:none;">
<img src="images/Detail_View.gif" /><br/><br/>
</div>