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以及基础环境搭建的更多相关文章

  1. Maven 学习笔记(一) 基础环境搭建

    在Java的世界里,项目的管理与构建,有两大常用工具,一个是Maven,另一个是Gradle,当然,还有一个正在淡出的Ant.Maven 和 Gradle 都是非常出色的工具,排除个人喜好,用哪个工具 ...

  2. ODB学习笔记之基础环境搭建

      一,简介 ODB是应用于C++的一个开源.跨平台.跨数据库的对象关系映射(ORM)系统. 它可以让你持久化C++对象到关系数据库,而不必处理表.列或者SQL,无需手动编写任何映射代码. ODB支持 ...

  3. EXT 基础环境搭建

    EXT 基础环境搭建使用 Sencha CMD 下载地址 https://www.sencha.com/products/extjs/cmd-download/ Sencha CMD 常用命令 API ...

  4. opengl基础学习专题 (一 )编程环境搭建

    题外话: 第一次在博客园上同大家分享博文.水的的地方,错别字的地方.环境交流.批评.知道了马上改. 以前在百度空间中写技术分享博文,后来百度啥也没说就把整个空间封了.当时感觉 还是有点寒心.只想黑一下 ...

  5. Hadoop学习笔记(3)——分布式环境搭建

    Hadoop学习笔记(3) ——分布式环境搭建 前面,我们已经在单机上把Hadoop运行起来了,但我们知道Hadoop支持分布式的,而它的优点就是在分布上突出的,所以我们得搭个环境模拟一下. 在这里, ...

  6. 深度学习(TensorFlow)环境搭建:(二)Ubuntu16.04+1080Ti显卡驱动

    前几天把刚拿到了2台GPU机器组装好了,也写了篇硬件配置清单的文章——<深度学习(TensorFlow)环境搭建:(一)硬件选购和主机组装>.这两台也在安装Ubuntu 16.04和108 ...

  7. (一)Hyperledger Fabric 1.1安装部署-基础环境搭建

    在学习和开发hyperledger fabric的时候遇到了一些坑,现将自己的一些总结和心得整理如下,以期对大家有所帮助.本次使用的宿主机环境:ubuntu,版本:Ubuntu 16.04.3 LTS ...

  8. HyperLedger Fabric 1.4 基础环境搭建(7)

    学习了前面几章理论知识后,本章开始介绍实践操作,先介绍Fabric基础环境搭建,采用的操作系统为Centos 7 64位,依次介绍Docker安装.Docker-Compose安装.GO语言环境安装. ...

  9. dos基础+环境搭建基础理论

    dos基础 市面上两大操作系统 windows.*nix(unix.linux.mac.bsd(安全性比较高)) 后三种都属于unix的衍生版本 linux是为了兼容unix开发的,最后开放了源代码 ...

随机推荐

  1. php 提交保存成功页面 倒计时 跳转

    前几天做了一个简单的成功提示页面! 有需要的可以拿去用,写的不好 欢迎指正!~~ 因为工程是在CI下面做的,url 自己用的话需要改正下函数!site_url()  这个函数式CI框架的 <ht ...

  2. SQL语句新建表,同时添加主键、索引、约束

    SQL语句新建数据表   主键,索引,约束 CREATE TABLE [dbo].[T_SendInsideMessageRec]( [SendInsideMID] [uniqueidentifier ...

  3. Cocos2d-JS键盘事件

    Cocos2d-JS中的键盘事件与触摸事件不同,它没有空间方面信息.键盘事件不仅可以响应键盘,还可以响应设备的菜单.键盘事件是EventKeyboard,对应的键盘事件监听器(cc.EventList ...

  4. "大哥,割草机借我用一下,我修整一下草坪。" ---- 谈谈this与JavaScript函数调用的不解之缘

    在写上一篇有关apply和call的博文时(闲聊JS中的apply和call),起初我还是担心大家理解起来比较困难,因为要理解apply调用方式的前提是,至少先理解在JavaScript中函数调用是什 ...

  5. spring事务配置的坑

    基于 <tx> 命名空间的声明式事务管理 前面两种声明式事务配置方式奠定了 Spring 声明式事务管理的基石.在此基础上,Spring 2.x 引入了 <tx> 命名空间,结 ...

  6. 配置FTP服务

    配置FTP服务 1.安装FTP服务器(默认已安装) 服 务:vsftpd 位 置:光盘1 软 件:vftpd-2.0.1-5.i386.rpm 配 置:/etc/vsftpd/vsftpd.conf ...

  7. Cstring使用说明

    CString::Left(intnCount)const; //从左边1开始获取前 nCount个字符 CString::Mid(intnFirst)const; //从左边第 nCount+1个字 ...

  8. 洛谷 1865 A%B问题

    题目背景 题目名称是吸引你点进来的 实际上该题还是很水的 题目描述 区间质数个数 输入输出格式 输入格式: 一行两个整数 询问次数n,范围m 接下来n行,每行两个整数 l,r 表示区间 输出格式: 对 ...

  9. WEB应用中的SESSION知多少?

    作为一名WEB开发程序员,对session的理解是最基础的,但是现状是WEB程序员遍地都是,随便一划拉一大把,不过估计能把session能透彻理解的人应该不是很多,起码我之前对此是知之甚少,偶然看到的 ...

  10. linux服务器git pull/push时提示输入账号密码之免除设置

    1.先cd到根目录,执行git config --global credential.helper store命令 [root@iZ25mi9h7ayZ ~]# git config --global ...