以jquery为底层库开发extJs程序（jquery结合extJs）

一、必须要有个jquery库，即是：jquery.js文件
1）目前最新版的为1.26
2）下载地址：http://docs.jquery.com/Downloading_jQuery
3）其实ext自带了JQ库，但是我不知道是不是最新版的，喜欢用新版的朋友可以下载下来覆盖上去
3）ext中JQ的位置为：adapter文件夹里面
二、下载EXT库，大的惊人，有5M之大，但是效果没话说，牛逼级别的。
1）下载地址：www.ajaxjs.com
2）目前最新版本为2.2
三、准备就绪，开始演示

1、在要使用EXT的页面中包含如下4个JS文件：
1）jquery.js
2）ext-jquery-adapter.js
3）jquery-plugins.js
4）ext-all.js
2、包含的代码一般如下：（根据自己本机的情况设置相对路径）
Copy code

<scrīpt type="text/javascrīpt" src="js/adapter/jquery/jquery.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="js/adapter/jquery/ext-jquery-adapter.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="js/adapter/jquery/jquery-plugins.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="js/ext-all.js"></scrīpt>
<link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css">

3、一个简单的示例：
Copy code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<scrīpt type="text/javascrīpt" src="js/adapter/jquery/jquery.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="js/adapter/jquery/ext-jquery-adapter.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="js/adapter/jquery/jquery-plugins.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="js/ext-all.js"></scrīpt>
<link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css">
<scrīpt type="text/javascrīpt" src="1.js"></scrīpt>
</head><body>
<p> </p>
<p>usr
<input name="usr" type="text" );
Ext.Msg.confirm(title);//显示选择的radion的值
}

再发一个在csdn博客上看到的文章上的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
以jquery为底层库开发extJs程序（jquery结合extJs）

<html>

<head>

<title>Untitled Document</title>
以jquery为底层库开发extJs程序（jquery结合extJs）

$(document).ready(function()...{
以jquery为底层库开发extJs程序（jquery结合extJs）

$('#wheelink').bind('click',function() ...{
以jquery为底层库开发extJs程序（jquery结合extJs）

Ext.Msg.alert('Whee alert!', 'Thanks for clicking me, WHEE!');
以jquery为底层库开发extJs程序（jquery结合extJs）

});

</script>

</head>

<body>

<a href="#" id="wheelink">Whee Click me Click me!</a>
以jquery为底层库开发extJs程序（jquery结合extJs）

</body>

</html>

四、关于ext与JQ冲突的解决方法
ext与JQ冲突最致命在于$(this)在EXT传递上有问题，原因在于jQuery很多函数返回的是jQuery类型，其实就是数组，是经过一定封装的。
螃哈哈同志已经给出了三个方案：
1）通过jQuery中类似get()的方法，因为get()方法返回的是Element，那么就可以传入EXT.get()中了
2）在jQuery回调函数function(e)（注：很多都可以带有e这个事件参数）中做文章，通过 EXT.get(e.arget)来达到目的。
3）通过 $('p').lt(5).gt(3).parent().attr("id","myId") 强行设置id，再通过 EXT.get("myId") 来得到