gan068

學習yui配合ajax的隨手記

驗證yui-ext是否載入 

在yui-ext中取得元素(elements)

選取DOM中所有<P>元素，並且顯著標記

yui-ext的回應事件

事件處理器(handler)

JSON解譯

驗證yui-ext是否載入 
Ext.onReady(function() {
alert("Congratulations!  You have Ext configured correctly!");
});

在yui-ext中取得元素(elements)
標準DOM寫法
var myDiv = document.getElementById('myDiv');

yui-ext寫法
Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});

選取DOM中所有<P>元素，並且顯著標記
Ext.select('p').highlight();

yui-ext的回應事件
onclick寫成on('click',...)，onMouseOver寫成on('mouseover',...)
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});

事件處理器(handler)
先定義一個handler叫做paragraphClicked，之後就可以重複使用
以下例子，DOM中<P>元素都會套用paragraphClicked這個handler
var paragraphClicked = function() {
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);

JSON解譯
XML原型
<?xml version="1.0" encoding="UTF-8"?>
<Items>
<Item>
<ASIN>0446532673</ASIN>
<DetailPageURL>http://www.amazon.com/gp/redirect.html%3FASIN=0446532673%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446532673%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>The Other Side of Me</Title>
</ItemAttributes>
</Item>
</Items>
轉JSON
var jsx='{"Items":{"Item":{"ASIN":"0446532673","DetailPageURL":"http:\/\/www.amazon.com\/gp\/redirect.html%3FASIN=0446532673%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=\/o\/ASIN\/0446532673%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2","ItemAttributes":{"Author":"Sidney Sheldon","Manufacturer":"Warner Books","ProductGroup":"Book","Title":"The Other Side of Me"}}}}';
var json=Ext.util.JSON.decode(jsx);
Ext.Msg.alert('The ASIN IS:',json.Items.Item.ASIN);

您可能有興趣的文章：

使用Ext.Template

yui-ext在FX上可執行，但在IE卻出錯

使用頁面Layout並且加上LayoutDialog