EXT結合jQuery

只要下載最近的EXT包,裏面已經涵蓋了我們需要的jQuery,下面是根據官方網站的介紹配置的最簡單的頁面

<!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>
<href="#" id="wheelink">Whee Click me Click me!</a>
</body>
</html>


 那麼在具體在項目中還會碰到哪些問題呢?我們來看個例子

<script type="text/javascript">
    $(document).ready(
function(){
        $(
'#testEXT').click(function(){
        
            
var paragraph = $(this);
            Ext.MessageBox.show(
{
                title: 
'Paragraph Clicked',
                msg: paragraph.dom.innerHTML,
                width:
400,
                buttons: Ext.MessageBox.OK,
                animEl: paragraph
            }
);        
        }
);
    }
);
</script>

會發現運行出錯,爲什麼呢?   原因在於 EXT中的paragraph和$(this)不能相互轉化,在jQuery的文檔中,我們可以看到,jQuery很多函數返回的是jQuery類型,其實就是數組,是經過一定封裝的。
我們只要稍稍改動就可以了,我總結了2個常用的方法
因爲EXT很多都是要通過EXT.get()方法來得到它所要使用的對象,而這個函數裏的參數類型是(
String/HTMLElement/Element el),那麼要怎麼轉換已經顯而易見了吧?
一、通過jQuery中類似get()的方法,因爲get()方法返回的是
Element,那麼就可以傳入EXT.get()中了
二、在jQuery回調函數function(e)(注:很多都可以帶有e這個事件參數)中做文章,通過 EXT.get(e.arget)來達到目的。
三、通過  $('p').lt(5).gt(3).parent().attr("id","myId")  強行設置id,再通過  EXT.get("myId") 來得到,這個方法有點耍流氓了,呵呵,不到萬不得已不推薦使用,會使代碼很亂。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章