ExtJs 下载及安装使用入门

最新推荐文章于 2018-05-11 11:40:29 发布

roger_lmj

最新推荐文章于 2018-05-11 11:40:29 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/mmm123lmj/article/details/4444798

版权

ExtJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

第一：下载ExtJs

官方最新版本下载（截至2008-04-21）：http://extjs.com/deploy/ext-2.0.2.zip

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

第三： 在demo文件夹中新建一个文件1.2a_helloword.html

内容如下：

 
 
  
  <html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Hello World</title> 
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> 
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="../ext-all.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function(){         
 alert('Hello World!'); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>

用浏览器浏览这一个文件，如果看到下面这一个界面，恭喜你，你的第一个ExtJs完成了。

简单解释一下上面代码

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

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

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

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

第四： 绚丽效果的弹出框

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

代码如下：

 
 
  
  <html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Hello World</title> 
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> 
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="../ext-all.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function(){         
 Ext.MessageBox.alert('Message', 'Hello World ! '); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>

效果图如下：

资源应用：

http://hi.baidu.com/%BF%D7%B7%B1%E1%AA/blog/item/ef79656e395b10dd80cb4a30.html

roger_lmj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs 下载及安装使用入门

第一：下载ExtJs官方最新版本下载（截至2008-04-21）：http://extjs.com/deploy/ext-2.0.2.zip第二：解压ExtJs压缩包解压后的目录如下图所示，其中的demo为新建的目录。第三：在demo文件夹中新建一个文件1.2a_helloword.html内容如下： Hello World Ext.onRe
复制链接

扫一扫