OA开发日志之Ext整合jQuery

在早期版本的Ext中,如果想要整合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>
上面的配置是可以的,由此看来,最新版本的Ext中并不需要什么jquery-plugin.js,只需要一个Ext的JQuery驱动则可,看似比较简单,里面却还有一点比较关键的问题需要注意

 

那就是

  1. 引入的先后顺序,这里注意一定要在jQuery的Library引入之后再引入ext-jquery-adapter否则会报出找不到jQuery Library的错误
  2. 不要再加载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 的 整合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>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值