extjs 入门

简介: 引用:http://extjs.org.cn/node/83 1.2.1 下载ExtJs压缩包最新版本(截至2008-04-21):http://extjs.com/deploy/ext-2.0.2.zip 1.2.2 解压ExtJs压缩包解压后的目录如下图所示,其中的demo为新建的目录。

引用:http://extjs.org.cn/node/83

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>

 

演示地址:http://extjs.org.cn/extjs/demo/1.2b_helloword.html
效果图如下:

只是有一句代码不同而已,但是效果却相差了十万八千里。

相关文章
|
JavaScript 前端开发 API
|
前端开发 JavaScript .NET
|
前端开发 JavaScript Web App开发
|
缓存 JavaScript 存储
|
Web App开发 前端开发 JavaScript
|
JSON JavaScript 前端开发