自己做的ext3.2 进度条 却没有显示效果

我的 testProgress.js 
//进度条对话框 ----------不出来呢？ 
extProgress = function(){ 
     Ext.MessageBox.show({ 
           title: "请等待", 
           msg: "正在加载项目......", 
           progressText: "正在初始化...",//是进度条滚动之前最初的文本，滚动进程由第19行的方法来定义 
           width:300, 
           progress:true, //此属性证明这是一个进度条 
           closable:false 
       }); 
   // 控制进度速度 
       var f = function(v){ 
            return function(){// 返回进度条 状态 
                if(v == 12){// 到了11 隐藏 
                    Ext.MessageBox.hide(); 
                    Ext.MessageBox.alert("完成", "所有项目加载完成!"); 
                }else{ 
                    var i = v/11; 
                    Ext.MessageBox.updateProgress(i, Math.round(100*i)+"% 已完成"); 
                }//定义滚动条的进程 
           }; 
       }; 
       
       for(var i = 1; i < 13; i++){ 
           setTimeout(f(i), i*500); 
       } 
} 前台jsp 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <base href="<%=basePath%>"> 
    
    <title>My JSP 'index.jsp' starting page</title> 
    
<link rel="stylesheet" type="text/css" href="ext-3.2/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-3.2/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ext-3.2/ext-all.js"></script>   </head> 
  <body> 
进度条对话框：（不好用）<p> 
  <script type="text/javascript" src="js/testProgress.js"></script> 
<input type="button" value="progress" onclick="extProgress();"> 
<hr/> 
  </body> 
</html> 
结果是：点击按钮，出现进度条了，但是就是不动弹，我是按照网上写的啊，都复制粘贴了也不行，难道是版本的问题吗？