1、在作ExtJs开发以前首先要到网站上下载ExtJs的开发包,我用的最新版本是4.1.1。此版本相对于以前的版本目录结构发生了一些变化,没有了adapter目录,javascript
目录结构以下css
build:文件夹下有一个sdk.jsb3文件,这个文件用于eclipse中spket插件,能够实现ExtJs的代码提示功能;java
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核心库的调试版,调试时使用。web
注:EXTJS文件的区别:bootstrap
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(名字随便起)文件夹里。app
2、查看本地API框架
ExtJs的帮助文档已经跟随代码被下载到电脑上了,在extjs-4.1.1/docs/文件夹中,全部的帮助文档所有在这里了,可是当我直接点击该文件夹下的index.html进行查看时,却发现一直显示在加载中,以下图所示
网上搜了下资料后,尝试了一下两种方法解决问题:
一、将文件夹放在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后,则可正常显示。
3、页面引用1.引入Ext的extjs-4.1.1/resources/css/ext-all.css2.引入ExtJS的核心库extjs-4.1.1/ext-all.js或者extjs-4.1.1/ext-all-debug.js3.引入本身写的实现本页面功能的JS.