Ext学习-HelloWorld以及基础环境搭建

1.目的

在eclipse中搭建EXTJS的基础环境，学习如何按照从官方下载的代码中搭建新的Extjs工程

2.主要包含内容：

1.ExtJS文件下载以及目录说明

2.ExtJS开发环境搭建

3.HelloWorld开发以及搭建

3.ExtJS文件下载以及目录说明

ext-4.2.1-gpl与ext-4.2.1-commercial的区别

ext-4.2.1-gpl：开源版本，使用GPL开源协议

ext-4.2.1-commercial：商业版本，收费，稳定

作为个人研究来讲，可以使用ext-4.2.1-gpl。

下载的Extjs目录中各个文件说明

主要目录说明

builds目录：压缩后的ExtJS代码，体积更小，更快，但是一般不使用；
cmd目录：未知，个人理解是给extjs命令行模式使用，一般不用
docs目录：开发文档；
examples目录：官方演示示例；
locale目录：多国语言资源文件，用户本地化，例如需要选择简体中文时，需要引入简体中文文件；
packages目录：ExtJS各部分功能的打包文件；
plugins目录:EXTJS中使用的插件，主要是flash相关的插件
resource目录：ExtJS所需要的CSS与图片文件；
src目录：未压缩的源代码目录
welcome目录：首页所需要的样式，图片等文件

主要文件说明

bootstarp.js：ExtJS库引导文件,可通过参数自动切换ext-all.js与ext-all-dev.js；
ext-all.js，ext-all-dev.js，ext-all-debug.js，ext-all-debug-w-comments.js：这是一组，都包含全部的EXTJS文件。每个文件分别代表一种使用场景：运行环境，开发环境，调试环境，带注释调试环境。
ext-all-rtl.js,ext-all-rtl-dev.js,ext-all-rtl-debug.js,ext-all-rtl-debug-w-comments.js：这四个是一组，表示支持从右到左语言（像希伯来语和阿拉伯语一样）。每个文件分别代表一种使用场景：运行环境，开发环境，调试环境，带注释调试环境。

实例：

ext.js,ext-dev.js,ext-debug.js,ext-debug-w-comments.js:这四个是一组，代表最精简的EXTJS代码。每个文件分别代表一种使用场景：运行环境，开发环境，调试环境，带注释调试环境。
ext-theme-access.js，ext-theme-classic.js，ext-theme-classic-sandbox.js，ext-theme-gray.js，ext-theme-neptune.js：这几个是一组，配合EXTJS的不同样式使用。
file-header.js：未知。文件为空。

bootstrap.js文件作用：根据不同的情况来加载不同的js文件。

/**
 * 加载本文件相同路径中的库
 *
 * 满足以下条件将自动加载 ext-all-dev.js：
 * - 当前主机名是 localhost
 * - 当前主机名是 IP v4 地址
 * - 当前协议是 "file:"
 *
 * 其它情况下将加载 ext-all.js (minified)
 */

新建web应用需要用的文件

新建一个标准的web应用需要使用的文件有：

1.bootstrap.js,ext-all-dev.js,ext-all.js:用来加载基本的Extjs环境。

2.locale\ext-lang-zh_CN.js：用来支持中文。

3.resources目录：用来加载样式和图片等。

4.ExtJS文件下载以及目录说明

spket插件安装配置

1.下载安装spket:

安装路径：http://www.agpad.com/update

2.配置

5.HelloWorld搭建测试

HelloWord搭建

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!--extJs文件-->
<script type="text/javascript" src="../../js/bootstrap.js" ></script>
<!--汉化语言包-->
<script type="text/javascript" src="../../js/locale/ext-lang-zh_CN.js" ></script>
<!-- 样式文件 -->
<link rel="stylesheet" type="text/css"     href="../../js/resources/css/ext-all.css" />

<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.MessageBox.alert('标题', 'Hello World!');
        });
    </script>
</body>
</html>

海王星皮肤使用说明

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!--extJs文件-->
<script type="text/javascript" src="../../js/bootstrap.js" ></script>
<!--汉化语言包-->
<script type="text/javascript" src="../../js/locale/ext-lang-zh_CN.js" ></script>

<!-- 海文星样式文件 -->
<link rel="stylesheet" type="text/css" href="../../js/resources/ext-theme-neptune/ext-theme-neptune-all.css" />
<!-- 比需要加，否则会出现样式问题 -->
<script src="../../js/ext-theme-neptune.js" type="text/javascript"></script>

<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.MessageBox.alert('标题', 'Hello World!');
        });
    </script>
</body>
</html>

还有我上面强调过一定要引入主题相对应的js文件，如果不引用会变成这样：

仔细看右上角的关闭按钮图标会向右方偏移

作者：sdjnzqr
出处：http://www.cnblogs.com/sdjnzqr/
版权：本文版权归作者和博客园共有
转载：欢迎转载，但未经作者同意，必须保留此段声明；必须在文章中给出原文连接；否则必究法律责任

posted @ 2014-08-14 16:19 正正杂说阅读(502) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

知识小站

Ext学习-HelloWorld以及基础环境搭建

公告