以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
3、一个简单的示例：
Copy code
再发一个在csdn博客上看到的文章上的例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/adapter/jquery/jquery.js"></script>
<script type="text/javascript" src="js/adapter/jquery/jquery-plugins.js"></script>
<script type="text/javascript" src="js/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="js/resources/css/xtheme-vista.css">
<script type="text/javascript"
>...
$(document).ready(function()...{
$('#wheelink').bind('click',function() ...{
Ext.Msg.alert('Whee alert!', 'Thanks for clicking me, WHEE!');
});
});
</script>
</head>
<body>
<a href="#" id="wheelink">Whee Click me Click me!</a>
</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") 来得到
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" id="usr" />
</p>
<p>txt
<textarea name="txt" id="txt"></textarea>
</p>
<p>
<input type="checkbox" name="checkbox1" id="chk1" value="-chk1" />
chk1
<input type="checkbox" name="checkbox2" id="chk2" value="-chk2" />
chk2</p>
<p>
<label>
<input type="radio" name="radio" id="rd1" value="-rd1" />
1</label>
<br />
<label>
<input type="radio" name="radio" id="rd2" value="-rd2" />
2</label>
</p>
<p>sel
<select name="sel" size="5" id="sel">
<option value="-sel1" selected="selected">1</option>
<option value="-sel2">2</option>
<option value="-sel3">3</option>
</select>
</p>
<p><br />
<input type="button" name="btn" id="btn_get" value="get" />
<input type="button" name="btn" id="btn_set" value="set" />
</p>
</body>
</html>
//----------------------1.js ------------------------------------$(document).ready
(
function()
{
var title=$("input[@type=radio][@checked]").attr("value");
Ext.Msg.confirm(title);//显示选择的radion的值
}
再发一个在csdn博客上看到的文章上的例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/adapter/jquery/jquery.js"></script> <script type="text/javascript" src="js/adapter/jquery/jquery-plugins.js"></script> <script type="text/javascript" src="js/adapter/jquery/ext-jquery-adapter.js"></script> <script type="text/javascript" src="js/ext-all.js"></script> <link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css"> <link rel="stylesheet" type="text/css" href="js/resources/css/xtheme-vista.css"> <script type="text/javascript">...
$(document).ready(function()...{ $('#wheelink').bind('click',function() ...{ Ext.Msg.alert('Whee alert!', 'Thanks for clicking me, WHEE!'); }); }); </script> </head> <body> <a href="#" id="wheelink">Whee Click me Click me!</a> </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") 来得到
