《Ext JS实战》——1.5 下载并配置

简介: 下载的SDK是个ZIP文件,差不多有6MB大小。后面会解释为什么这些文件会这么大。现在,把这个文件解压到一个用于专门保存JavaScript的地方。要使用Ajax,需要有一个Web服务器。我在自己的计算机上一般会配置一个本地的Apache,它是个免费的而且跨平台的Web服务器,不过Windows的IIS也行。

本节书摘来自异步社区《Ext JS实战》一书中的第1章,第1.5节,作者:【美】Jesus Garcia著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.5 下载并配置

尽管下载Ext JS的过程简单,可配置一个使用Ext JS的页面却不像在HTML中引用一个文件那么简单。除了配置之外,还得了解目录的层级关系,要知道都有哪些目录以及它们的用途。

我们要做的第一件事就是得到源代码。
下载的SDK是个ZIP文件,差不多有6MB大小。后面会解释为什么这些文件会这么大。现在,把这个文件解压到一个用于专门保存JavaScript的地方。要使用Ajax,需要有一个Web服务器。我在自己的计算机上一般会配置一个本地的Apache,它是个免费的而且跨平台的Web服务器,不过Windows的IIS也行。现在看看刚刚解压出来的内容。

1.5.1 检查SDK的内容
如果像我一样检查一下解压之后SDK文件的大小,可能会感到非常惊讶。是的,一个差不多有30MB的JavaScript框架。图1-18显示了解压后的内容。

screenshot

看看SDK的内容,会发现许多东西。之所以有这么多的目录和文件,是因为下载下来的包中有多份代码和CSS的拷贝。这样做是为了开发人员可以自由地按照适合自己的方式构建或者使用Ext JS。表1-1说明了包含哪些目录及其作用。

screenshot

尽管发布包中有这么多的文件和目录,不过要想让框架能够在浏览器中运行起来,只要很少的一部分就够了。现在谈谈该如何根据需要配置Ext JS。

1.5.2 第一次配置Ext JS
要想让Ext JS能在浏览器中运行起来,至少需要包含两个必须的JavaScript文件和至少一个CSS文件:

screenshot

作为一个完整的Ext JS配置,这里链接了3个核心文件。我们所做的第一件事就是链接到ext-all.css文件,这是一个把框架中所有CSS集中在一起的文件。接下来,包含了ext-base-debug.js,这个文件是框架的基础。最后,包含了ext-all-debug.js文件,要用这个文件开发。在配置第一个页面时,一定要确保把extjs路径替换成自己开发环境中Web服务器所要引用的框架。

如果还要想用其他的基础框架该怎么做呢?应该如何包含它们呢?

1.5.3 配置Ext JS使用其他框架
要想让Ext JS能使用之前提到的那些框架,在引用这些外部基础框架之前首先要加载一个适配器(adapter)。这个适配器会把ext-base方法映射到所选择的外部函数库,这是最关键的一步。如果想使用Ext JS之外的其他3种基础框架,可以使用下面的模式。

先看Prototype函数库:

screenshot

可以看出来,除增加了两个JS文件以外,剩下的和普通的Ext JS设置类似。Prototype和Scriptaculous取代了ext-base,ext-prototype-adapter.js把外部的函数库方法映射到Ext。注意,仍然要加载ext-all-debug.js。对另外两个例子也如此炮制。

下一个是jQuery:

screenshot

配置jQuery和Prototype类似。YUI的配置也类似,区别就在于要加载不同的基础函数库和不同的适配器文件。

最后一个是YUI:

screenshot

现在已经掌握了配置Ext-all和其他3种基础JS函数库的秘诀了。继续,还是要用Ext-all配置,只不过可以自由选择用哪个基础函数库。在到达代码层面之前,还需要谈谈Ext配置的最后一个关键步骤,即配置对于s.gif的引用。

明智地使用BLANK_IMAGE_URL配置
建议在对Ext JS文件的包含之后紧接着就设置这个参数,或者放在应用代码被解析之前。等要测试Ext JS时,会通过一个例子告诉你在哪放置这个参数。
1.5.4 配置BLANK_IMAGE_URL
开发人员经常忽略的一个步骤就是配置Ext.BLAND_IMAGE_URL,这会导致应用程序中UI渲染出现问题。BLANK_IMAGE_URL属性所指向的是一个1×1像素的透明图片的位置(也叫做一个垫片),它是框架的UI部分的一个关键内容,是用来创建图标的。对大部分用户来说,这样做是可以的,不过如果所在的地区无法访问extjs.com,这就有问题了。如果用的是SSL的话,对s.gif的请求是通过HTTP而不是HTTPS发出的,这又是个问题,因为这会触发浏览器发出安全警告。为了避免这些问题,应该把Ext.BLANK_IMAGE_URL指向Web服务器本地的s.gif,如:

screenshot

差不多了,了解了这么多内容后,我们已经按耐不住要使用Ext JS了,那还等什么?现在这就开始吧。

相关文章
|
1月前
|
中间件
egg.js 24.17中间件配置
egg.js 24.17中间件配置
20 0
egg.js 24.17中间件配置
|
2月前
|
API
在vite.config.js 配置代理
在vite.config.js 配置代理
70 2
|
3月前
|
JavaScript Android开发
AutoJs4.1.0实战教程---js文件打包发布成APK文件
AutoJs4.1.0实战教程---js文件打包发布成APK文件
106 0
AutoJs4.1.0实战教程---js文件打包发布成APK文件
|
3月前
|
JavaScript 前端开发 小程序
js 实现浏览器下载视频2种方法
js 实现浏览器下载视频2种方法
431 0
|
4月前
|
人工智能 JavaScript 前端开发
【前端|JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏!
【前端|JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏!
|
2月前
|
JavaScript 前端开发 Java
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 和 Ext JS 都是 JavaScript 框架,用于开发 Web 应用程序。它们分别提供了不同的功能和特性,以帮助开发者更高效地构建和维护 Web 应用程序。
17 2
|
2月前
|
数据安全/隐私保护
Wiki.js 配置 LDAP 认证
Wiki.js 配置 LDAP 认证
|
3月前
highlight.line-numbers.js下载及使用
highlight.line-numbers.js下载及使用
28 1
|
3月前
|
JavaScript
highlightjs-copy-button.js下载和使用
highlightjs-copy-button.js下载和使用
21 0
|
3月前
|
移动开发 JavaScript
echarts生成图表并下载为PDF文件(附带js源码地址)
echarts生成图表并下载为PDF文件(附带js源码地址)
40 0