Alex刺客

Dancing fingers, damage world. -- 舞动手指,破坏世界.
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  57 随笔 :: 0 文章 :: 76 评论 :: 0 Trackbacks
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>

posted on 2010-08-14 04:21 Alex刺客 阅读(3143) 评论(0)  编辑  收藏 所属分类: ExtJS

只有注册用户登录后才能发表评论。
网站导航: