<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>
那麼在具體在項目中還會碰到哪些問題呢?我們來看個例子
$(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") 來得到,這個方法有點耍流氓了,呵呵,不到萬不得已不推薦使用,會使代碼很亂。