Ext JS 入门

wjlgryx

浏览: 308602 次
性别:
来自: 北京

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ext JS

EXT JavaScript CSS HTML 浏览器

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
内容如下：
<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
效果图如下:

简单解释一下上面代码
view sourceprint?
1.
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

这一个是引入ExtJs的默认样式
view sourceprint?
1.
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
2.
<script type="text/javascript" src="../ext-all.js"></script>

ExtJs所需要的核心脚本全部都在这两个js文件中。
view sourceprint?
1.
<script type="text/javascript">
2.
Ext.onReady(function(){
3.
//页面初始化代码
4.
});
5.
</script>

Ext.onReady 是指在整个页面加载完后执行。
1.3.4 绚丽效果的弹出框
上面（1.3.3）只是告诉你环境配置成功了，下面我们来看一下ExtJs中的弹出框的效果。
代码如下：
<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
效果图如下:

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