环境说明与HelloWorld

本人采用的是ExtJs4.2版本，采用WebStorm作为IDE开发工具

目录说明

builds：压缩后的ExtJs代码

docs：文档

examples：官方示例

locale：多国语言的资源文件

src：未压缩过的源码

bootstrap.js：ExtJs库的引导文件，通过参数可以自动切换ext-all.js和ext-debug.js

ext-all.js：核心库

ext-all-debug.js：ext-all.js的调试版本

packages：ExtJs各部分功能的打包文件

resources：CSS和图片文件

基本引入

开发的时候，有些文件是必须引入的

1、 resources：ExtJs各种样式

2、 ext-all.js：核心库

3、 ext-all-debug.js：调试模式

4、 ext-lang_zh_CN.js：本地化

5、 bootstrap.js：根据当前的模式，引入不同的文件，相当于库引导文件【在ext-all.js与ext-all-dev.js之间进行切换】

5、　　 ext-all-dev.js：开发模式

HelloWorld演示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ExtJs HelloWorld</title>
 6     <!--extJs的样式-->
 7     <link type="text/css" rel="stylesheet" href="../resources/extJs/resources/css/ext-all.css" />
 8     <!--extJs的核心文件  也可以使用 bootstrap.js 让它自己判断导入何种类型的核心库文件-->
 9     <script type="text/javascript" charset="utf-8" src="../resources/extJs/ext-all-debug.js"></script>
10     <!--国际化文件-->
11     <script type="text/javascript" charset="utf-8" src="../resources/extJs/locale/ext-lang-zh_CN.js"></script>
12 
13     <script type="text/javascript" charset="utf-8" src="01_HelloWorld.js"></script>
14 
15 </head>
16 <body>
17 
18 </body>
19 </html>

HelloWorld.html

1 /**
2  * Created by sherry on 16/8/14.
3  */
4 
5 Ext.onReady(function () {
6     Ext.MessageBox.alert("提示信息!","Hello World!");
7 });

HelloWorld.js

运行效果：