PHP博客-为了忘却的纪念-随笔分类-jshttp://www.phpweblog.net/fuyongjie/category/504.html言己及众zh-cnThu, 29 May 2008 06:15:09 GMTThu, 29 May 2008 06:15:09 GMT60[Ext研究之一]Ext与JQuery的初步整合http://www.phpweblog.net/fuyongjie/archive/2008/05/28/3955.htmlbestmostbestmostWed, 28 May 2008 08:07:00 GMThttp://www.phpweblog.net/fuyongjie/archive/2008/05/28/3955.htmlhttp://www.phpweblog.net/fuyongjie/comments/3955.htmlhttp://www.phpweblog.net/fuyongjie/archive/2008/05/28/3955.html#Feedback0http://www.phpweblog.net/fuyongjie/comments/commentRss/3955.htmlhttp://www.phpweblog.net/fuyongjie/services/trackbacks/3955.html
于是，决定抽时间对Ext进行系统一点的研究，看是否能够应用到日常的生产实践中去。

研究决定分三步走：
第一步，Ext与JQuery的整合。由于Ext与JQuery的整合没有找到任何的相关说明文字，全靠自己去摸索。
第二步，Ext各个功能组件的熟悉及测试。这一步主要是熟悉各个功能组件的使用方法、特点及用途。
第三步，Ext与FleaPHP的整合。走完这一步，与真正的应用其实已经不远了。

1、下载文件

首先，打开Ext的下载页面http://www.extjs.com/download，如下图所示，点击窗口底部的【Downlaod Ext 1.0.1a】按钮下载1.0.1a版的Ext资源包。zip压缩包里面的API文档及演示案例都是今后的第一手研究资料，而且里面的一些JS库文件、资源文件在进行案例研究，以及今后进行应用开发时都要用到。



点击上图的红线部分，在出现下面的页面后，点选JQuery，然后单击【Next】按钮。



在新的页面里找到如图所示的“Check All”选择框，并打勾，选择生成全部功能的组件库文件。当然了，为了减少最后生成的JS文件的体积，你也可以把一些不需要的组件去掉。如果想取消某个组件，将该组件前面选择框的勾去掉即可。



最后点击窗口底部的【Build It】按钮，生成ext.js文件（已进行空间压缩）。**我保存的文件名改为ext-all-jquery.js

其次，打开“Tutorial: Getting Started with Forms”教程页面，下载测试实例（如下图所示，点击红线部分）。



2、创建测试目录

在网站的根目录下创建一个测试主目录及一些相关的子目录，并把相关的文件拷贝到相应目录下。



如上图所示，我在Web服务器的根目录下创建了一个ext主目录；一个forms子目录，用来保存测试实例文件；一个libs子目录，用来保存Ext的 JS库文件和资源文件。这些文件都是先前所下载或生成的，把它复制过来就是了。我建立libs子目里的目的，是为了方便将来进行移植。

由于测试实例的文件名太长了，为了方便测试，我不得不将它们进行缩短。
引用:
forms-getting-started.js => forms.js
forms-getting-started-process.php => forms-process.php
forms-getting-started-working.php => forms-working.php
3、运行测试实例

由于Ext的库文件的位置和测试文件名已发生变动，因此必须对forms-working.php文件进行编辑
引用:
<link rel="stylesheet" href="/lib/resources/css/ext-all.css" />
<script src="/lib/adapter/yui/yui-utilities.js"></script>
<script src="/lib/adapter/yui/ext-yui-adapter.js"></script>
<script src="/lib/ext-all-debug.js"></script>
<script src="forms-getting-started.js"></script>
修改为：
引用:
<link rel="stylesheet" href="../libs/Ext/resources/css/ext-all.css" />
<script src="../libs/Ext/adapter/yui/yui-utilities.js"></script>
<script src="../libs/Ext/adapter/yui/ext-yui-adapter.js"></script>
<script src="../libs/Ext/ext-all-debug.js"></script>
<script src="forms.js"></script>
打开浏览器，在地址栏里输入：http://127.0.0.1/ext/forms/forms-working.php，回车确认。

如果出现以下的页面，则测试实例已初步运行成功。



4、Ext与JQuery的初步整合

由于没有找到任何Ext与JQuery整合的相关资料，完全得靠自己摸索，因此浪费费了我相当多的时间。我是花了整整一个晚上才悟出这么一点道道。

修改forms-working.php文件<head></head>里的引用文件：
引用:
<script src="../libs/Ext/adapter/yui/yui-utilities.js"></script>
<script src="../libs/Ext/adapter/yui/ext-yui-adapter.js"></script>
<script src="../libs/Ext/ext-all-debug.js"></script>
改为：
引用:
<script src="../libs/Ext/adapter/jquery/jquery.js"></script>
<script src="../libs/Ext/adapter/jquery/jquery-plugins.js"></script>
<script src="../libs/Ext/adapter/jquery/ext-jquery-adapter.js"></script>
<script src="../libs/Ext/ext-all-jquery.js"></script>
文件说明：
jquery.js JQuery框架文件
jquery-plugins.js 没有找到相关说明，查看源代码，似乎是做一些初始化的工作。
ext-jquery-adapter.js 估计与SmartyHelper.php文件的作用差不多，即是Ext与JQuery的接口。

最后，刷新先前的浏览器测试页面，一切OK，说明Ext与JQuery的整合初步告捷。

在这里，需要特别指出，由于jquery.js、jquery-plugins.js、ext-jquery-adapter.js、ext-all- jquery.js这四个js文件有严格的依赖关系，缺一不可。同时，它们的引用顺序必须按照上面的次序进行，不能打乱，否则运行测试实例时将出错。

5、整合后的兼容性测试

修改后的测试实例，在Firefox 2.0里测试没有任何问题，包括转到IE核下测试。但在IE 6下测试时，出现下面的错误，却又不影响测试。原因待查。。。。。。



另外，在gb2312字符集下使用也不太好，显示出来的用户界面有些少问题。如下图所示：



6、结束语

JQuery与yui-Ext整合测试的初步成功，只是万里长征迈出的一小步，离真正的实际应用还差十万八千里，是否能到达成功的彼岸，感觉非常考验自己的毅力及技术水平。因为资料的缺乏，小小的整合测试就已经花费了相当多的时间，以后的研究，实在不敢想象。

bestmost 2008-05-28 16:07 发表评论
]]>