Ext入门

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

幸福小猪的MM

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

阅读量540

点赞数

文章标签： ext extjs stylesheet function 浏览器脚本

本文链接：https://blog.csdn.net/zhang_zhu/article/details/6248348

版权

ExtJs入门
1.2.1 下载ExtJs压缩包
http://extjs.com/deploy/ext-2.0.2.zip

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

1.2.3 在demo文件夹中新建一个文件1.2a_helloword.html
内容如下：
view source
print?
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
效果图如下:

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

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

view source
print?
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 source
print?
1.<script type="text/javascript">
2.Ext.onReady(function(){
3.    //页面初始化代码
4.});
5.</script>

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

1.3.4 绚丽效果的弹出框
上面（1.3.3）只是告诉你环境配置成功了，下面我们来看一下ExtJs中的弹出框的效果。
代码如下：
view source
print?
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
两种的效果图是不一样的.

幸福小猪的MM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ext入门

<br />ExtJs入门<br />1.2.1 下载ExtJs压缩包<br />http://extjs.com/deploy/ext-2.0.2.zip<br /><br />1.2.2 解压ExtJs压缩包<br />解压后的目录如下图所示，其中的demo为新建的目录。<br /><br />1.2.3 在demo文件夹中新建一个文件1.2a_helloword.html<br />内容如下：<br />view source<br />print?<br />01.<
复制链接

扫一扫