一、在做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.

转载于:https://www.cnblogs.com/ariklee/p/3671243.html

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

  1. 【Vue】—项目的目录结构介绍

    [Vue]-项目的目录结构介绍

  2. Linux常用命令(本篇包括,Linux目录结构介绍、Linux Shell介绍、9个常见命令介绍、文件的概念、文件的操作(20个)、目录的操作、文件和目录的权限、文件压缩及解压缩)

    Linux常用命令(本篇包括,Linux目录结构介绍.Linux Shell介绍.9个常见命令介绍.文件的概念.文件的操作(20个).目录的操作.文件和目录的权限.文件压缩及解压缩)         ...

  3. Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用

    提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见 学习Dart 基础知识 移步这里 安装flutter环境相关 移步这里 flutter基础组件使用相关 移步这里 文章目录 一 ...

  4. 帝国cms目录结构介绍

    帝国CMS目录结构介绍 / 系统根目录 ├d/            附件和数据存放目录 (data) │├file/       附件存放目录 │├js/         JS调用生成目录 │└tx ...

  5. Kettle教程(二):Kettle目录结构介绍

    文章目录 前言 一.Kettle的Spoon/Pan/Kitchen/Carte 简介 1.Spoon 2.Pan 3.Kitchen 4.Carte 二.Kettle的目录结构介绍 三.总结 前言 ...

  6. go-ethereum环境搭建及目录结构介绍

    go-ethereum代码阅读环境搭建 Ubuntu 16.04 64bit/Mac 安装GO 配置环境变量(GOROOT, GOPATH, GOBIN) 下载源码: $ cd $GOPATH; $ ...

  7. Android系统源码学习——源码目录结构介绍

    2019独角兽企业重金招聘Python工程师标准>>> Android 4.0源码目录结构: 本文介绍Android源码目录结构,以便读者理清Android编译系统核心代码在Andr ...

  8. Vue项目目录结构介绍(三)

    前言 本章我们会对一个 Vue 项目的目录结构进行讲解,解释各子目录以及文件的作用,前端的模块化,Vue 单文件组件规范等. 1.基础目录和文件介绍 在上一章,我们通过 vue-cli 创建了一个新的 ...

  9. Lichee(一)­­ lichee目录结构介绍和编译命令

    经过繁琐的环境搭建和漫长的代码下载的等待,我们终于可以开始我们的lichee之旅了,由于内容很繁杂,涉及面比较广,接下来就针对linux uboot modules等是如何被打包到固件这条主线来分析, ...

最新文章

  1. JAVA《第一次作业》
  2. 轻量级流程图控件GoJS示例连载(一):最小化
  3. 源代码遭泄露,大疆员工被罚20万,判刑半年。
  4. Django-form表单
  5. 对现有的所能找到的DDOS代码(攻击模块)做出一次分析----自定义攻击篇
  6. Request.Browser.Crawler 属性的工作原理分析
  7. linux下安装配置jdk(解压版)
  8. leetcode542 01矩阵
  9. 亚马逊云服务(AWS)中国与毕马威中国建立战略合作伙伴关系
  10. Android_bug之Default Activity not found
  11. Repository和dao
  12. 《OpenACC并行程序设计:性能优化实践指南》一 第2章 性能导向开发
  13. Spark创建临时视图
  14. 支付安全不能说的那些事
  15. C# Json转list List转json
  16. 电子合同助力“在线教育”高效发展
  17. 如何将视频生成M3U8文件格式?
  18. QQ拼音输入法使用评价
  19. 计算机开机界面用户如何删除,电脑开机用户去掉登录界面方法
  20. 如果使用编程判断闰年和平年,大神勿喷!

热门文章

  1. Java使用表格显示日历编程_用java图形用户界面实现: 编写一个日历程序,能实现显示日历等简单功能。...
  2. html中的声明的作用域,Html/CSS 作用域
  3. linux程序改ip地址吗,如何在Linux中从C设置IP地址
  4. java 泛型 类型形参(Type Parameters)Type Parameters 边界(Bound) 类型
  5. sqlalchemy 增删改
  6. MongoDB 用户管理
  7. 1.10 卷积神经网络示例
  8. opencv 2d直方图
  9. Pandas GroupBy对象
  10. android flutter 环境,Android Studio 中创建Flutter环境配置(Mac环境)