提問一：啥是ext？
ext是一套JS框架，他可以創建RIA富客戶端程序，可以像cs架構中的桌面應用那樣，界面豐富多線奪目炫麗，ajax遍地都是，即點即改，提高用戶體驗,一個字---爽。
HelloWord程序
<html>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" /><!--解決中文亂碼-->
<head>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<!-- 本地化的腳本引用在這里 -->
<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.alert('EXT歡迎你', '為你開天辟地');
});
</script>
<title>Application Layout Tutorial</title>
</head>
<body>
</body>
</html>
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
我們平時要獲取一個HTMl文檔里的節點, 該怎么做?
var myDiv = document.getElementById('myDiv');
沒錯, 這樣會工作的很好, 而且現在大多數人也是這樣來搞的, 但是這樣在頁面里一個兩個可以, 多了就會很頭疼, 于是乎YUI-Ext給我們想到了一個簡單的方法.
Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});
簡單吧(如果用Prototype.js里的語法更簡單^_^).這樣就可以得到一個id為myDiv的元素, 然后把他的引用賦值給變量myDiv, 這以后, 你就可以對這個div進行操作了, 比如:
myDiv.highlight();// 這個元素的背景色會從高亮的黃色漸漸淡出.
myDiv.addClass('red');// 加入一個自定義的CSS樣式類 (在 ExtStart.css 里面定義)
myDiv.center();// 在瀏覽器里居中這個元素
myDiv.setOpacity(.25);// 給這個元素加上25%的半透明效果
現在我們知道怎樣通過元素的ID來選擇一個元素, 下面我們看看怎么選擇一批元素.
Ext.select('p').highlight();
高亮所有標簽為P的元素. 通過這個例子你就可以看到, 我們來選擇頁面上的一批元素有多么簡單, Ext為我們提供了一個接口, 通過這個接口我們可以來獲取一批想要的元素, 并為他們設置屬性, 不用循環, 不用遍歷每一個元素.僅僅這些, 還不夠, Javascript是用事件來驅動的, 我們呢, 就來看看怎樣響應一個事件
Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});
這樣就為頁面里ID為myButton的按鈕加上了一個click事件, 觸發這個時間以后會彈出一個提示框. 嘿嘿, 有沒有發現, 我們不用再在頁面里的元素上, 寫上一個 onclick='showMessage', 然后在去JS里面, 寫上一個showMessage函數了. 我們再來給所有的P標簽都加上單擊事件, 方法同上
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});
通過上面兩個例子, 我們可以看到, 我們可以把一個事件處理用很簡單的方式定義在一行里, 不用給出函數名稱, 只寫上函數體, 就是所謂的匿名函數, 同樣我們也可以在另外的地方寫出一個函數, 然后把函數賦值給一個變量, 我們再在這里來使用它.
Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
這次我們先實現了一個函數, 然后賦值給paragraphClicked, 在事件調用的時候我們把這個句柄傳了進去, 這樣也可以實現事件的相應^_^.我們再來看看他還能干什么.
Ext.onReady(function() {
var paragraphClicked = function(e) {
var paragraph = Ext.get(e.target);
paragraph.highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
在所有的P標簽上單擊的時候, 都會高亮這個段落, 然后在淡出, 酷吧..下面我們再來看看更酷的, 消息框的使用.我們在上面的高亮語句下面再加上幾句
var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});