5.加载ExtJS 时的 loading 提示

5.加载ExtJS 时的 loading 提示

借用 ExtJS Document 中的 loading 提示做了个项目加载 ExtJS Loading.(嘿嘿)

 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3  < head >
 4  < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />
 5  < title > Study ExtJS </ title >
 6       < style  type ="text/css" >
 7          body  {
 8              background : white ;
 9           }
10          #loading {
11              position : absolute ;
12              left : 45% ;
13              top : 40% ;
14              padding : 2px ;
15              z-index : 20001 ;
16              height : auto ;
17           }
18          #loading a  {
19              color : #225588 ;
20           }
21          #loading .loading-indicator {
22              background : white ;
23              color : #444 ;
24              font : bold 13px tahoma,arial,helvetica ;
25              padding : 10px ;
26              margin : 0 ;
27              height : auto ;
28           }
29          #loading-msg  {
30              font :  normal 12px arial,tahoma,sans-serif ;
31           }
32       </ style >
33  </ head >
34  < body >
35       < div  id ="loading" >
36           < div  class ="loading-indicator" >
37               < img  src ="images/extanim32.gif"  width ="32"  height ="32"  style ="margin-right:8px;"  align ="absmiddle" />
38              Project Name
39               < span  id ="loading-msg" > loading </ span >
40           </ div >
41       </ div >
42       <!--  ExtJS CSS  -->
43       < script  type ="text/javascript" > document.getElementById('loading - msg').innerHTML  =  'Loading ExtJS CSS'; </ script >
44       < link  rel ="stylesheet"  type ="text/css"  href ="extjs/resources/css/ext-all-notheme.css"   />
45       < link  rel ="stylesheet"  type ="text/css"  title ="blue"       href ="extjs/resources/css/xtheme-blue.css"   />  
46       < link  rel ="stylesheet"  type ="text/css"  title ="gray"       href ="extjs/resources/css/xtheme-gray.css"   />
47       < link  rel ="stylesheet"  type ="text/css"  title ="access"     href ="extjs/resources/css/xtheme-access.css"   />
48       < link  rel ="stylesheet"  type ="text/css"  title ="yourtheme"  href ="extjs/resources/css/yourtheme.css"   />
49       <!--  ExtJS Core JS  -->
50       < script  type ="text/javascript" > document.getElementById('loading - msg').innerHTML  =  'Loading ExtJS核心'; </ script >
51       < script  type ="text/javascript"  src ="extjs/ext-base.js" ></ script >
52       <!--  ExtJS All JS  -->
53       < script  type ="text/javascript" > document.getElementById('loading - msg').innerHTML  =  'Loading UI 组件'; </ script >
54       < script  type ="text/javascript"  src ="extjs/ext-all.js" ></ script >
55       <!--  ExtJS Core Lang-zh_CN  -->
56       < script  type ="text/javascript" > document.getElementById('loading - msg').innerHTML  =  'Loading UI 国际化资源文件'; </ script >
57       < script  type ="text/javascript"  src ="extjs/ext-lang-zh_CN.js" ></ script >
58       <!--  Project Ext JS  -->
59       < link  rel ="stylesheet"  type ="text/css"  href ="css/extjs-firefox-font-size.css"   />
60      
61       < script  type ="text/javascript" > document.getElementById('loading - msg').innerHTML  =  'Loading UI 项目JS文件'; </ script >
62       < script  type ="text/javascript"  src ="js/MenuTreePanel.js" ></ script >
63       < script  type ="text/javascript"  src ="js/MainTabPanel.js" ></ script >
64       < script  type ="text/javascript"  src ="js/userManage.js" ></ script >
65       < script  type ="text/javascript"  src ="js/systemManage.js" ></ script >
66       < script  type ="text/javascript"  src ="js/Viewport.js" ></ script >
67      
68       < script  type ="text/javascript" > Ext.onReady( function (){Ext.removeNode(Ext.getDom( " loading " ));}); </ script >
69  </ body >
70  </ html >