ExtJs4.1目录结构介绍和使用说明[转]

一、在做ExtJs开发之前首先要到网站上下载ExtJs的开发包，我用的最新版本是4.1.1。此版本相对于之前的版本目录结构发生了一些变化，没有了adapter目录，

目录结构如下

文件/文件夹名的作用：

build：文件夹下有一个sdk.jsb3文件，这个文件用于eclipse中spket插件，可以实现ExtJs的代码提示功能；

    builds：压缩后的ExtJS代码，体积更小，更快；
    docs：开发文档；
    examples：官方演示示例；
    locale：多国语言资源文件；
    pkgs：ExtJS各部分功能的打包文件；
    resource：ExtJS所需要的CSS与图片文件；
    src：未压缩的源代码目录；
    bootstarp.js：ExtJS库引导文件,可通过参数自动切换ext-all.js与ext-all-debug.js；
    ext-all.js：ExtJS核心库,需要引用；
    ext-all-debug.js：ExtJS核心库的调试版,调试时使用。

注：EXTJS文件的区别：

    ext-all.js：包含所有的EXTJS框架文件，已经混淆
    ext-all-debug.js：包含所有的EXTJS框架文件，没有混淆
    ext-all-dev.js：包含所有的EXTJS框架文件，没有混淆，且包含调试信息
    ext.js：仅包含能让EXTJS运行的最小集合，已经混淆
    ext-debug.js：仅包含能让EXTJS运行的最小集合，没有混淆
    ext-dev.js：仅包含能让EXTJS运行的最小集合，没有混淆，且包含调试信息
    bootstrap.js：自动加载ext-all.js或者ext-all-debug.js，在以下情况下会加载ext-all-debug.js

        1.当前主机名是本地
        2.当前主机是使用IPV4地址
        3.Current protocol is a file
        4.其他情况下自动加载ext-all.js

我们在进行Ext开发的时候只需将ext-all.js、ext-all-debug.js、bootstarp.js和locale文件夹里的ext-lang-zh_CN.js以及resource整个文件夹拷入项目的ExtJs4（名字随便起）文件夹里。

二、查看本地API

ExtJs的帮助文档已经跟随代码被下载到电脑上了，在extjs-4.1.1/docs/文件夹中，所有的帮助文档全部在这里了，但是当我直接点击该文件夹下的index.html进行查看时，却发现一直显示在加载中，如下图所示

网上搜了下资料后，尝试了一下两种方法解决问题：

1、将文件夹放在Tomcat服务器下，可以将下载下来的整个ExtJs文件拷贝到..\Apache Software Foundation\Tomcat 6.0\webapps文件夹下，然后启动Tomcat服务器，在浏览器中输入http://localhost:8080/extjs-4.1.1/docs/即可进入Ext JS4.1帮助文档的首页。网上说这是由于打开帮助文档用到了Ajax，所以需要部署到服务器上。

2.查看doc文件夹下的index.html文件，发现没有加载ext-all.js，却加载的是ext.js。而ext.js仅包含能让EXTJS运行的最小集合，ext-all.js：包含所有的EXTJS框架文件，于是猜想是这个问题导致。于是试着将<script type="text/javascript" src="../ext.js"></script>改成<script type="text/javascript" src="../ext-all.js"></script>，然后双击inde.html后可以正常加载API文档了。

以上两种方法均解决了问题，但是我不明白的是为什么将其部署到服务器上而不将原来加载的ext.js文件改为ext-all.js可行，而单独将加载文件改一下也可行，不知道其根本原因是什么。我猜想是由于部署到服务器上之后可以用到所有相关的文件；而通过双击index.html的方式打开帮助文档由于只加载了ext.js而不能正常显示，当改为ext-all.js后，则可正常显示。

三、页面引用
1.引入Ext的extjs-4.1.1/resources/css/ext-all.css
2.引入ExtJS的核心库extjs-4.1.1/ext-all.js或者extjs-4.1.1/ext-all-debug.js
3.引入自己写的实现本页面功能的JS.