首页 > 代码库 > EXTJS学习笔记--搭建实验环境
EXTJS学习笔记--搭建实验环境
- 1.目的
在eclipse中搭建EXTJS的基础环境,学习如何按照从官方下载的代码中搭建新的Extjs工程
- 2.学习过程中遇到的问题
- 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目录:用来加载样式和图片等。
- spket插件安装配置
1.下载安装spket:
安装路径:http://www.agpad.com/update
2.配置
- 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/
版权:本文版权归作者和博客园共有
转载:欢迎转载,但未经作者同意,必须保留此段声明;必须在文章中给出原文连接;否则必究法律责任
出处:http://www.cnblogs.com/sdjnzqr/
版权:本文版权归作者和博客园共有
转载:欢迎转载,但未经作者同意,必须保留此段声明;必须在文章中给出原文连接;否则必究法律责任
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。