Ext 整合 Jquery

如果想要整合jQuery需要用到Ext的jQuery驱动，jquery的plugin和jQuery的Library 本身，今天正好遇到这个整合的问题，于是google了一下，得到了如上的解决方案，我用的Ext是3.3版本的，属于比较新的，但在其驱动目录下只有jQuery的驱动，并没有jquery-plugin.js本身，看了一个帖子，说是要自己去上网找，于是在07年的一个开源的项目里找到了这个文件，欣喜之配了上去，结果还是一样，firebug又报出了让我看不懂的错误，回来之后缕了一下思路，又在网上参考了一下，终于可以整合了，配置如下:

 

  1. <!-- Ext 样式文件 -->  
  2. <link style="text/css" rel="stylesheet" href="<%=basePath %>/ext/resources/css/ext-all.css">  
  3. <!-- jQuery Javascript Library -->  
  4. <script type="text/javascript" src="<%=basePath %>/ext/adapter/jquery/jquery.js"></script>  
  5. <!-- Ext 的 整合jQuery的驱动 -->  
  6. <script type="text/javascript" src="<%=basePath %>/ext/adapter/jquery/ext-jquery-adapter.js"></script>  
  7. <!-- Ext 基础包 -->  
  8. <script type="text/javascript" src="<%=basePath %>/ext/ext-all.js"></script>  


上面的配置是可以的，由此看来，最新版本的Ext中并不需要什么jquery-plugin.js，只需要一个Ext的JQuery驱动则可，看似比较简单，里面却还有一点比较关键的问题需要注意

 

那就是

  1. 引入的先后顺序，这里注意一定要在jQuery的Library引入之后再引入ext-jquery-adapter否则会报出找不到jQuery Library的错误
  2. 不要再加载Ext的base驱动，如果同时加载两个驱动就会出现错误，这点让我难以理解的是ext-base-adapter比ext-jquery-adatper还要大

好了写一段代码测试一下

 

view plainprint?
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <%  
  4.     String path = request.getContextPath();  
  5.     String basePath = request.getScheme() + "://"  
  6.             + request.getServerName() + ":" + request.getServerPort()  
  7.             + path;  
  8. %>  
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  10. <html>  
  11. <head>  
  12. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  13. <title>Insert title here</title>  
  14. <!-- Ext 样式文件 -->  
  15. <link style="text/css" rel="stylesheet" href="<%=basePath %>/ext/resources/css/ext-all.css">  
  16. <!-- jQuery Javascript Library -->  
  17. <script type="text/javascript" src="<%=basePath %>/ext/adapter/jquery/jquery.js"></script>  
  18. <!-- Ext 的 的驱动 -->  
  19. <script type="text/javascript" src="<%=basePath %>/ext/adapter/ext/ext-base.js"></script>  
  20. <!-- Ext 的 整合jQuery的驱动 -->  
  21. <script type="text/javascript" src="<%=basePath %>/ext/adapter/jquery/ext-jquery-adapter.js"></script>  
  22. <!-- Ext 基础包 -->  
  23. <script type="text/javascript" src="<%=basePath %>/ext/ext-all.js"></script>  
  24.   
  25. </head>  
  26. <body>  
  27. <script type="text/javascript">  
  28. $(document).ready(function(){  
  29.     Ext.Msg.alert("测试","OK");  
  30. });  
  31. </script>  
  32. </body>  
  33. </html>  


posted @ 2011-12-22 15:54  Jake.Xu  阅读(2588)  评论(1)  编辑  收藏  举报