《Ext JS权威指南》——2.2节配置使用Ext JS库

简介: 本节书摘来自华章社区《Ext JS权威指南》一书中的第2章,第2.2节配置使用Ext JS库,作者:黄灯桥,更多章节内容可以访问云栖社区“华章社区”公众号查看

2.2 配置使用Ext JS库
要使用Ext JS,首先要做的是将Ext JS包里的resources目录、bootstrap.js文件、ext-all.js文件和ext-all-debug.js文件复制到项目目录。接着在页面中head标记部分添加CSS和脚本文件的引用:

<link rel="stylesheet" type="text/css" href="path/resources/css/ext-all.css"/>    
<script type="text/javascript" src="path/bootstrap.js"></script>

要注意代码中的path是CSS文件或脚本文件相对于页面文件的路径。例如,页面文件在根目录,resoureces目录在根目录下,bootstrap.js在js目录下,就可这样写:

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>    
    <script type="text/javascript" src="js/bootstrap.js"></script>

如果熟悉Ext JS 2或Ext JS 3的,会发现Ext JS 4不是直接加载ext-all.js或ext-all-debug.js,而是加载了bootstrap.js,这有什么好处呢?先看看bootstrap.js的源代码:

(function() {

    var scripts = document.getElementsByTagName('script'),
        localhostTests = [
            /^localhost$/,            /\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(:\d{1,5})?\b/ // IP v4
        ],
        host = window.location.hostname,
        isDevelopment = null,
        queryString = window.location.search,
        test, path, i, ln, scriptSrc, match;
    for (i = 0, ln = scripts.length; i < ln; i++) {
        scriptSrc = scripts[i].src;
        match = scriptSrc.match(/bootstrap\.js$/);
        if (match) {
            path = scriptSrc.substring(0, scriptSrc.length - match[0].length);
            break;
        }
    }

    if (queryString.match('(\\?|&)debug') !== null) {
        isDevelopment = true;
    }
    else if (queryString.match('(\\?|&)nodebug') !== null) {
        isDevelopment = false;
    }
    if (isDevelopment === null) {
        for (i = 0, ln = localhostTests.length; i < ln; i++) {
            test = localhostTests[i];
            if (host.search(test) !== -1) {
                isDevelopment = true;
                break;
            }
        }
    }

    if (isDevelopment === null && window.location.protocol === 'file:') {
        isDevelopment = true;
    }

    document.write('<script type="text/javascript" src="' + path + 'ext-all' + ((isDevelopment) ? '-debug' : '') + '.js"></script>');

})();

代码首先使用getElementsByTagName获取页面中所有带有script标记的元素,然后从中找出带有bootstrap.js的标记,最后将bootstrap.js的相对路径取出并保存在变量path中。
接着判断url的参数中是否有“debug”字符,例如,出现http://localhost/index.html? debug,则设置isDevelopment 为true。否则检测是否有“nodebug”字符,如果有,设置为false。如果以上两个条件都不符合,isDevelopment 还是初始值null,就要判断url的域名是否是“localhost”或IPv4地址,如果是,则isDevelopment设置为true。
如果isDevelopment是null且当前的url的协议是“file:”,则将isDevelopment 设置为true。如果isDevelopment为true时,则加载ext-all-debug.js文件,否则加载ext-all.js文件。
通过bootstrap.js,可自动控制加载ext-all-debug.js文件或ext-all.js文件,不用我们自己去修改script标记,非常方便。但如果你觉得自己修改方便,也可以使用Ext JS旧版的方式加载脚本文件。不过bootstrap.js有个缺点,就是把所有IPv4地址都划归为使用调试文件的范围,不太符合国内的情况。因为在内网,应用也多半是使用IP地址访问的。不过,根据自己的情况去修改bootstrap.js也是很方便的。
如果想动态加载Ext JS库,就需要在页面中先加载builds目录下的Ext-core.js或Ext.-core-debug.js文件,然后在onReady函数外添加以下代码:

Ext.Loader.setConfig({enabled: true});
        Ext.Loader.setPath({//加载路径配置对象});
        Ext.require([
            'Ext.grid.*',
        …
        //需要加载的库
        ]);
        Ext.onReady(function(){
            //代码
        });

Loader对象的setConfig方法设置的enabled属性的作用是,开启动态加载的依赖加载功能。该功能的作用是在加载类库文件的时候,根据其依赖情况加载它需要的类库,其默认值是false,这是因为一般情况下Ext JS的库文件都是一次性全部加载的,很少用到动态加载。试想一下,Ext JS类库有200多个文件,在无法预知要加载多少类库的情况下,不断地向服务器请求100多个类库甚至全部200多个类库,那是很吓人的,不但增加了服务器的负担,客户也要一直等待类库的加载,这不是好的方法,所以不推荐使用此方法。
Loader对象的setPath方法是用来设置加载路径的,这在4.5节中会讲述。接着就是使用Ext.require方法请求加载类库了。

相关文章
|
2月前
|
JavaScript 前端开发 Java
通义灵码 Rules 库合集来了,覆盖Java、TypeScript、Python、Go、JavaScript 等
通义灵码新上的外挂 Project Rules 获得了开发者的一致好评:最小成本适配我的开发风格、相当把团队经验沉淀下来,是个很好功能……
835 102
|
2月前
|
JavaScript 前端开发 API
|
1月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
129 24
|
3月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
1727 24
|
3月前
|
Prometheus 监控 JavaScript
Node.js连接池配置的五个隐形陷阱与防御体系:从创业公司血泪史说起
文章以创业公司血泪史为例,详细阐述了 Node.js 连接池配置的五个隐形陷阱及防御体系。包括连接泄漏、配置参数算术错误、异步异常导致崩溃、跨连接事务问题、监控缺失,并介绍了相应的解决办法和终极防御手段,强调在确定性与不确定性中寻找平衡,建立自适应机制。
75 13
|
4月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
131 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
7月前
|
移动开发 JavaScript 前端开发
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
268 58
|
7月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
205 57
|
7月前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
277 57
|
7月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?