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/

版权：本文版权归作者和博客园共有

转载：欢迎转载，但未经作者同意，必须保留此段声明；必须在文章中给出原文连接；否则必究法律责任

Ext学习-HelloWorld以及基础环境搭建的更多相关文章

Maven 学习笔记(一) 基础环境搭建
在Java的世界里,项目的管理与构建,有两大常用工具,一个是Maven,另一个是Gradle,当然,还有一个正在淡出的Ant.Maven 和 Gradle 都是非常出色的工具,排除个人喜好,用哪个工具 ...
ODB学习笔记之基础环境搭建
一,简介 ODB是应用于C++的一个开源.跨平台.跨数据库的对象关系映射(ORM)系统. 它可以让你持久化C++对象到关系数据库,而不必处理表.列或者SQL,无需手动编写任何映射代码. ODB支持 ...
EXT 基础环境搭建
EXT 基础环境搭建使用 Sencha CMD 下载地址 https://www.sencha.com/products/extjs/cmd-download/ Sencha CMD 常用命令 API ...
opengl基础学习专题 (一 )编程环境搭建
题外话: 第一次在博客园上同大家分享博文.水的的地方,错别字的地方.环境交流.批评.知道了马上改. 以前在百度空间中写技术分享博文,后来百度啥也没说就把整个空间封了.当时感觉还是有点寒心.只想黑一下 ...
Hadoop学习笔记(3)——分布式环境搭建
Hadoop学习笔记(3) ——分布式环境搭建前面,我们已经在单机上把Hadoop运行起来了,但我们知道Hadoop支持分布式的,而它的优点就是在分布上突出的,所以我们得搭个环境模拟一下. 在这里, ...
深度学习（TensorFlow）环境搭建：（二）Ubuntu16.04+1080Ti显卡驱动
前几天把刚拿到了2台GPU机器组装好了,也写了篇硬件配置清单的文章——<深度学习(TensorFlow)环境搭建:(一)硬件选购和主机组装>.这两台也在安装Ubuntu 16.04和108 ...
（一）Hyperledger Fabric 1.1安装部署-基础环境搭建
在学习和开发hyperledger fabric的时候遇到了一些坑,现将自己的一些总结和心得整理如下,以期对大家有所帮助.本次使用的宿主机环境:ubuntu,版本:Ubuntu 16.04.3 LTS ...
HyperLedger Fabric 1.4 基础环境搭建（7）
学习了前面几章理论知识后,本章开始介绍实践操作,先介绍Fabric基础环境搭建,采用的操作系统为Centos 7 64位,依次介绍Docker安装.Docker-Compose安装.GO语言环境安装. ...
dos基础+环境搭建基础理论
dos基础市面上两大操作系统 windows.*nix(unix.linux.mac.bsd(安全性比较高)) 后三种都属于unix的衍生版本 linux是为了兼容unix开发的,最后开放了源代码 ...

随机推荐

删除HT和CAS角色与扩展在另一台服务器
背景:原先使用三合一方式部署的架构,如今不再满足企业需求,因此需要将原来的一台服务器多角色的拆分开,即由原来CAS.HT.MBX角色集一台服务器的分成两台服务器来部署,此架构为MBX角色单独部署在 ...
iOS学习笔记--OC系列（1）
前言从学校毕业进入公司工作已经第3个年头了,回顾这3年的经历,有种迷茫的感觉.在公司我主要是做零售业公司的系统维护,接触的主要是Oracle的Database的东西.但是业务知识和oracle,都没 ...
php面向对象的特性：OOP的继承
1.关键字extends 2.PHP只支持单继承,不支持方法重载 /*使用protect 调用字段*/ class Computer{ //父类的字段 protected $_name="联 ...
【MediaKit】WPF项目中调用摄像头拍照的开发包
今天遇到一个人事的项目,项目中需要调用摄像头给员工照相.如何解决这个问题呢? 介绍一个开发包给你,MediaKit.论坛里头的人都说好,但是黑兔觉得大家好才是真的好.你不妨试试~ 第一步:添加WPF ...
使用JDBC向数据库中插入一条数据
原谅我是初学者,这个方法写的很烂,以后不会改进,谢谢 /** * 通过JDBC向数据库中插入一条数据 1.Statement 用于执行SQL语句的对象 1.1 通过Connection 的 * cre ...
使用原生Sql查询实现按分类推送最新文章到首页
一般在网站的首页都会有网站最新文章的推送,而这些文章又属于不同的分类.如果某个分类的文章突然集中在一个时间段发布,那么就会造成首页上所有文章都是该分类的文章,其他的文章分类就变成不可见的了.所以,我希 ...
使用C++读取UTF8及GBK系列的文本方法及原理
作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4374404.html 1.读取UTF-8编码文本原理首先了解UTF-8的编码方式,UTF- ...
Ubuntu14.04 安装 PHP cURL
今天遇到 Fatal error: Call to undefined function curl_init() in /xxx/xxxx/www/application/library/Ku/Htt ...
Z-BlogPHP 安装出现 (8) Undefined offset: 6 解决方法
有些cp面板的空间会在每个网页头部和页脚增加两个调用的文件,导致zblogPHP安装出错:(8) Undefined offset: 6 主要国外的主机中PHP配置文件两个选项auto_prepend ...
PHP安全之register_globals
一.register_globals = Off 和 register_globals = On的区别 register_globals是php.ini里的一个配置,这个配置影响到php如何接收传递过 ...

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

Ext学习-HelloWorld以及基础环境搭建的更多相关文章

随机推荐

热门专题