ext 入门

最新推荐文章于 2022-07-09 10:12:18 发布

longyuan20102011

最新推荐文章于 2022-07-09 10:12:18 发布

阅读量380

点赞数

分类专栏： ext 文章标签： ext extjs function 浏览器脚本

本文链接：https://blog.csdn.net/longyuan20102011/article/details/7939081

版权

ext 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.2.1 下载ExtJs压缩包
最新版本（截至2008-04-21）：http://extjs.com/deploy/ext-2.0.2.zip

1.2.2 解压ExtJs压缩包
解压后的目录如下图所示，其中的demo为新建的目录。

1.2.3 在demo文件夹中新建一个文件1.2a_helloword.html
内容如下：

 
   01. 
   <html> 
  
   02. 
   <head> 
  
   03. 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  
   04. 
   <title>Hello World</title> 
  
   05. 
   <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> 
  
   06. 
   <script type="text/javascript" src="../adapter/ext/ext-base.js"></script> 
  
   07. 
   <script type="text/javascript" src="../ext-all.js"></script> 
  
   08. 
   <script type="text/javascript"> 
  
   09. 
   Ext.onReady(function(){    
  
   10. 
   alert('Hello World!'); 
  
   11. 
   }); 
  
   12. 
   </script> 
  
   13. 
   </head> 
  
   14. 
   <body> 
  
   15. 
   </body> 
  
   16. 
   </html>

用浏览器浏览这一个文件，如果看到下面这一个界面，恭喜你，你的第一个ExtJs完成了。
演示地址:http://extjs.org.cn/extjs/demo/1.2a_helloword.html
效果图如下:

简单解释一下上面代码

1. <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

这一个是引入ExtJs的默认样式

1. <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>

2. <script type="text/javascript" src="../ext-all.js"></script>

ExtJs所需要的核心脚本全部都在这两个js文件中。

 
   1. 
   <script type="text/javascript"> 
  
   2. 
   Ext.onReady(function(){    
  
   3. 
   //页面初始化代码 
  
   4. 
   }); 
  
   5. 
   </script>

Ext.onReady 是指在整个页面加载完后执行。

1.3.4 绚丽效果的弹出框
上面（1.3.3）只是告诉你环境配置成功了，下面我们来看一下ExtJs中的弹出框的效果。
代码如下：

 
   01. 
   <html> 
  
   02. 
   <head> 
  
   03. 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  
   04. 
   <title>Hello World</title> 
  
   05. 
   <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> 
  
   06. 
   <script type="text/javascript" src="../adapter/ext/ext-base.js"></script> 
  
   07. 
   <script type="text/javascript" src="../ext-all.js"></script> 
  
   08. 
   <script type="text/javascript"> 
  
   09. 
   Ext.onReady(function(){    
  
   10. 
   Ext.MessageBox.alert('Message', 'Hello World ! '); 
  
   11. 
   }); 
  
   12. 
   </script> 
  
   13. 
   </head> 
  
   14. 
   <body> 
  
   15. 
   </body> 
  
   16. 
   </html>