以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" 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") 来得到

posted on 2010-04-26 19:57  J-Pei  阅读(939)  评论(0编辑  收藏  举报

导航