提問一：啥是ext？
ext是一套JS框架，他可以創(chuàng)建RIA富客戶端程序，可以像cs架構(gòu)中的桌面應(yīng)用那樣，界面豐富多線奪目炫麗，ajax遍地都是，即點(diǎn)即改，提高用戶體驗(yàn),一個(gè)字---爽。
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>
我們平時(shí)要獲取一個(gè)HTMl文檔里的節(jié)點(diǎn), 該怎么做?
var myDiv = document.getElementById('myDiv');
沒錯(cuò), 這樣會(huì)工作的很好, 而且現(xiàn)在大多數(shù)人也是這樣來搞的, 但是這樣在頁面里一個(gè)兩個(gè)可以, 多了就會(huì)很頭疼, 于是乎YUI-Ext給我們想到了一個(gè)簡單的方法.
Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});
簡單吧(如果用Prototype.js里的語法更簡單^_^).這樣就可以得到一個(gè)id為myDiv的元素, 然后把他的引用賦值給變量myDiv, 這以后, 你就可以對(duì)這個(gè)div進(jìn)行操作了, 比如:
myDiv.highlight();// 這個(gè)元素的背景色會(huì)從高亮的黃色漸漸淡出.
myDiv.addClass('red');// 加入一個(gè)自定義的CSS樣式類 (在 ExtStart.css 里面定義)
myDiv.center();// 在瀏覽器里居中這個(gè)元素
myDiv.setOpacity(.25);// 給這個(gè)元素加上25%的半透明效果
現(xiàn)在我們知道怎樣通過元素的ID來選擇一個(gè)元素, 下面我們看看怎么選擇一批元素.
Ext.select('p').highlight();
高亮所有標(biāo)簽為P的元素. 通過這個(gè)例子你就可以看到, 我們來選擇頁面上的一批元素有多么簡單, Ext為我們提供了一個(gè)接口, 通過這個(gè)接口我們可以來獲取一批想要的元素, 并為他們?cè)O(shè)置屬性, 不用循環(huán), 不用遍歷每一個(gè)元素.僅僅這些, 還不夠, Javascript是用事件來驅(qū)動(dòng)的, 我們呢, 就來看看怎樣響應(yīng)一個(gè)事件
Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});
這樣就為頁面里ID為myButton的按鈕加上了一個(gè)click事件, 觸發(fā)這個(gè)時(shí)間以后會(huì)彈出一個(gè)提示框. 嘿嘿, 有沒有發(fā)現(xiàn), 我們不用再在頁面里的元素上, 寫上一個(gè) onclick='showMessage', 然后在去JS里面, 寫上一個(gè)showMessage函數(shù)了. 我們?cè)賮斫o所有的P標(biāo)簽都加上單擊事件, 方法同上
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});
通過上面兩個(gè)例子, 我們可以看到, 我們可以把一個(gè)事件處理用很簡單的方式定義在一行里, 不用給出函數(shù)名稱, 只寫上函數(shù)體, 就是所謂的匿名函數(shù), 同樣我們也可以在另外的地方寫出一個(gè)函數(shù), 然后把函數(shù)賦值給一個(gè)變量, 我們?cè)僭谶@里來使用它.
Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
這次我們先實(shí)現(xiàn)了一個(gè)函數(shù), 然后賦值給paragraphClicked, 在事件調(diào)用的時(shí)候我們把這個(gè)句柄傳了進(jìn)去, 這樣也可以實(shí)現(xiàn)事件的相應(yīng)^_^.我們?cè)賮砜纯此€能干什么.
Ext.onReady(function() {
var paragraphClicked = function(e) {
var paragraph = Ext.get(e.target);
paragraph.highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
在所有的P標(biāo)簽上單擊的時(shí)候, 都會(huì)高亮這個(gè)段落, 然后在淡出, 酷吧..下面我們?cè)賮砜纯锤岬? 消息框的使用.我們?cè)谏厦娴母吡琳Z句下面再加上幾句
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
});