如果想要整合jQuery需要用到Ext的jQuery驱动,jquery的plugin和jQuery的Library 本身,今天正好遇到这个整合的问题,于是google了一下,得到了如上的解决方案,我用的Ext是3.3版本的,属于比较新的,但在其驱动目录下只有jQuery的驱动,并没有jquery-plugin.js本身,看了一个帖子,说是要自己去上网找,于是在07年的一个开源的项目里找到了这个文件,欣喜之配了上去,结果还是一样,firebug又报出了让我看不懂的错误,回来之后缕了一下思路,又在网上参考了一下,终于可以整合了,配置如下:
- <!-- Ext 样式文件 -->
- <link style="text/css" rel="stylesheet" href="<%=basePath %>/ext/resources/css/ext-all.css">
- <!-- jQuery Javascript Library -->
- <script type="text/javascript" src="<%=basePath %>/ext/adapter/jquery/jquery.js"></script>
- <!-- Ext 的 整合jQuery的驱动 -->
- <script type="text/javascript" src="<%=basePath %>/ext/adapter/jquery/ext-jquery-adapter.js"></script>
- <!-- Ext 基础包 -->
- <script type="text/javascript" src="<%=basePath %>/ext/ext-all.js"></script>
那就是
- 引入的先后顺序,这里注意一定要在jQuery的Library引入之后再引入ext-jquery-adapter否则会报出找不到jQuery Library的错误
- 不要再加载Ext的base驱动,如果同时加载两个驱动就会出现错误,这点让我难以理解的是ext-base-adapter比ext-jquery-adatper还要大
好了写一段代码测试一下
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme() + "://"
- + request.getServerName() + ":" + request.getServerPort()
- + path;
- %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title here</title>
- <!-- Ext 样式文件 -->
- <link style="text/css" rel="stylesheet" href="<%=basePath %>/ext/resources/css/ext-all.css">
- <!-- jQuery Javascript Library -->
- <script type="text/javascript" src="<%=basePath %>/ext/adapter/jquery/jquery.js"></script>
- <!-- Ext 的 的驱动 -->
- <script type="text/javascript" src="<%=basePath %>/ext/adapter/ext/ext-base.js"></script>
- <!-- Ext 的 整合jQuery的驱动 -->
- <script type="text/javascript" src="<%=basePath %>/ext/adapter/jquery/ext-jquery-adapter.js"></script>
- <!-- Ext 基础包 -->
- <script type="text/javascript" src="<%=basePath %>/ext/ext-all.js"></script>
- </head>
- <body>
- <script type="text/javascript">
- $(document).ready(function(){
- Ext.Msg.alert("测试","OK");
- });
- </script>
- </body>
- </html>