| Summary: 在本教程將助你合理地規(guī)劃一個(gè)應(yīng)用程序。 |
| Author: Jozef Sakalos(譯者：Frank Cheung) |
| Published: August 27, 2007 |
| Ext Version: 1.1+ / 2.0+ |
Languages: 習(xí)筆記/11.2/TutorialApplication%20Layout%20for%20Beginners%20(Chinese)%20-%20Learn%20About%20the%20Ext%20JavaScript%20Library.files/en.png) 習(xí)筆記/11.2/TutorialApplication%20Layout%20for%20Beginners%20(Chinese)%20-%20Learn%20About%20the%20Ext%20JavaScript%20Library.files/cn.png) 習(xí)筆記/11.2/TutorialApplication%20Layout%20for%20Beginners%20(Chinese)%20-%20Learn%20About%20the%20Ext%20JavaScript%20Library.files/br.png) |
Contents[hide] |
本教程假設(shè)你已經(jīng)安裝好ExtJS庫。安裝的目錄是extjs 并位于你程序的上一級目錄。如果安裝在其它地方你必須更改路徑，更改示例文件中script標(biāo)簽的src的屬性。
除ExtJS庫本身外，我們還需要兩個(gè)文件：
先看看一份html文檔，比較精簡。并附有詳細(xì)說明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"><script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../extjs/ext-all-debug.js"></script><script type="text/javascript" src="applayout.js"></script><!-- 本地化的腳本引用在這里 --><script type="text/javascript">Ext.onReady(myNameSpace.app.init, myNameSpace.app);</script><title>Application Layout Tutorial</title></head><body></body></html>
開頭的兩行聲明了文檔的類型。程序可以不用doctype,但是這樣的話瀏覽器可能默認(rèn)其為Quirks怪僻類型，會(huì)導(dǎo)致處理跨瀏覽器這一問題上出現(xiàn)差異。
我們采用HTML 4.01 Transitional的文檔類型，該類型在主流瀏覽器上支持得不錯(cuò)。當(dāng)然，你也可以根據(jù)你的需求采用其它類型的doctype，但是記住別忘了要加上doctype。
更新： 不好意思，，其實(shí)呢 這個(gè)doctype了在IE底下呢，加了的話渲染時(shí)候會(huì)有點(diǎn)BUG，所以還是不建議加。~~我頂 我是這里的譯者————真的不頂不可，老外怎么搞的啊
接著指定HTML頭部的Content-Type。做這些事情其實(shí)很瑣碎，但總是有益處。
然后引入EXT的樣式，適配器和EXTJS本身。有兩種版本的ExtJS：
開發(fā)階段的時(shí)候便需要引入debug的版本。
applayout.js這個(gè)文件就是我們的程序，緊跟著的是本地化的腳本，這里可以換成Extjs翻譯好的版本
跟著我們開始分配事件句柄(event handler)，使得在文檔全部加載完畢后，程序就可以初始化（運(yùn)行）。
下面的這一行：
Ext.onReady(myNameSpace.app.init, myNameSpace.app);
可這樣說：當(dāng)文檔全部加載完畢,就運(yùn)行myNameSpace.app的init方法,規(guī)定的作用域是myNameSpace.app。
然后是標(biāo)題，頭部的結(jié)尾，body（當(dāng)前空）和結(jié)束標(biāo)簽。
/*** Application Layout* by Jozef Sakalos, aka Saki* http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_(Chinese)*//**－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－中文用戶請注意：applayout.js 這個(gè)文件應(yīng)該在編輯生成文件的同時(shí)強(qiáng)行定義為UTF-8編碼才可以通過.－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/// 填充圖片的本地引用Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif'; // 創(chuàng)建命名空間Ext.namespace('myNameSpace'); // 創(chuàng)建應(yīng)用程序myNameSpace.app = function() {// 元素還沒創(chuàng)建,未能訪問 // 私有變量 // 私有函數(shù) // 公共空間return {// 公共的屬性,如,要轉(zhuǎn)換的字符串// 公共方法init: function() {alert('應(yīng)用程序初始化成功。');}};}(); // 程序底部 // 文件底部
文件最開始的幾行是注釋，說明該文件的主要內(nèi)容、作者、作者相關(guān)的資訊。沒有任何注釋的程序也可以正常的運(yùn)行，————但請記?。?strong>每次寫的程序要容易給人看得懂的 Always write your application as if you would write it for another.當(dāng)你回頭看你幾個(gè)月前寫的代碼，發(fā)現(xiàn)你根本不記得自己寫過什么的時(shí)候，就會(huì)明白這個(gè)道理，并養(yǎng)成編碼的好習(xí)慣。接著是要指向你服務(wù)器的填充圖片，如不指定則默認(rèn)extjs.com。每次運(yùn)行程序的時(shí)候都訪問extjs.com，不推薦這樣，應(yīng)該先修改這個(gè)常量值指向到本地。
現(xiàn)在自定義命名空間。將所有變量和方法都劃分到一個(gè)全局對象下管理，這樣的好處是避免了變量名沖突和由不同函數(shù)干擾了全局變量的值。名字（namespace）可按自己的方案選擇。
整段代碼的重點(diǎn)是，我們創(chuàng)建了 myNameSpace對象的屬性app，其值是一個(gè)函數(shù)立刻運(yùn)行之后的返回值。
如果運(yùn)行我們的代碼：
var o = function() {return {p1:11, p2:22};}();
實(shí)際上我們創(chuàng)建了一個(gè)匿名函數(shù)（沒有名字的函數(shù)），經(jīng)過解釋之后讓它立刻運(yùn)行（注意函數(shù)后面的()）。最后將函數(shù)返回的對象（注意此時(shí)是一個(gè)object變量）分配到變量o。我們的程序便是這種思路去寫的。
你可以把私有變量和私有函數(shù)直接定義在function和return這兩個(gè)聲明之間，但是請切記：此時(shí)不能訪問任何html頁面中的元素，那會(huì)導(dǎo)致錯(cuò)誤，因?yàn)檫@段代碼在加載時(shí)頁面的head中就運(yùn)行了，而這時(shí)候html頁面中的其它元素還沒有被加載進(jìn)來。
另外一方面，函數(shù)init,是由匿名函數(shù)返回的對象的一個(gè)方法而已。它會(huì)在文檔全部加載后才運(yùn)行。換言之整個(gè)DOM樹已經(jīng)是可用的了。
一切都還好吧～如果能正確運(yùn)行 http://yourserver.com/applayout/applayout.html ，不出現(xiàn)什么錯(cuò)誤的話將彈出一個(gè)對話框。
接下來是利用這個(gè)空白的模板，討論本文的重點(diǎn)。
讓我們程序變得更有意思。在頁面applayout.html的body標(biāo)簽中加入：
<div id="btn1-ct"></div>
空白的div會(huì)當(dāng)作按鈕的容器來使用。然后在applayout.js加入下來代碼：
/*** Application Layout* by Jozef Sakalos, aka Saki* http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_(Chinese)*/ // 填充圖片的本地引用Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif'; // 允許這個(gè)指南同時(shí)在Ext2.0 和1.1 上同時(shí)工作Ext.Ext2 = (Ext.version && (Ext.version.indexOf("2") == 0)); // 創(chuàng)建命名空間Ext.namespace('myNameSpace'); // 創(chuàng)建應(yīng)用程序myNameSpace.app = function() {// 元素還沒創(chuàng)建,未能訪問 // 私有變量var btn1;var privVar1 = 11; // 私有函數(shù)var btn1Handler = function(button, event) {alert('privVar1=' + privVar1);alert('this.btn1Text=' + this.btn1Text);}; // 公共空間return {// 公共的屬性,如,要轉(zhuǎn)譯的字符串btn1Text: 'Button 1', // 公共方法init: function() {if (Ext.Ext2) {btn1 = new Ext.Button({renderTo: 'btn1-ct',text: this.btn1Text,handler: btn1Handler});} else {btn1 = new Ext.Button('btn1-ct', {text: this.btn1Text,handler: btn1Handler});}}};}(); //程序底部 // 文件底部
變量btn1 和privVar1 是私有的。 那意味著在程序外部他們是不能夠被訪問的，而且也不可見。私有函數(shù)btn1Handler也是同樣道理。
另外一個(gè)方面，btn1Text是公共變量所以可以被程序外部訪問或者是修改（我們稍后將會(huì)演示）。
函數(shù)init是特權(quán)的，即是私有變量和公共變量兩者都可以被它訪問到。在本例中，公共變量this.btn1Text和私有函數(shù)btn1Handler都能夠被特權(quán)函數(shù)init所訪問。同時(shí)，相對外界來說，它也屬于公共成員的一種。
Ok,運(yùn)行看看。能看到左上角的按鈕嗎？很好，點(diǎn)擊它。得到一個(gè)privVar1=11的警告。這說明私有函數(shù)能訪問私有變量。
但是，在第二個(gè)alert中，this.btn1Text卻是undefined，表示是未定義的，這不是我們期望的結(jié)果。原因是在handler內(nèi)的this變量指向的是button而不是我們的myNameSpace.app .增加scope屬性來指明this為myNameSpace.app：
if (Ext.Ext2) {btn1 = new Ext.Button({renderTo: 'btn1-ct',text: this.btn1Text,handler: btn1Handler,scope:this});} else {btn1 = new Ext.Button('btn1-ct', {text: this.btn1Text,handler: btn1Handler,scope:this});}
刷新一下，可以了吧？
在applayout.js底部加入下列代碼：
Ext.apply(myNameSpace.app, {btn1Text:'Taste 1'}); // 文件底部
這代碼是用來干什么的呢？首先它創(chuàng)建了我們的程序?qū)ο笕缓蟾淖儯ㄖ貙懀┕沧兞?strong>btn1Text的值。運(yùn)行后將看到按鈕上文字的變化。
把文本都放到公共變量，以便于以后的國際化翻譯工作，而不需要修改程序的內(nèi)部代碼。
當(dāng)然你也可以將其它的值例如尺寸、樣式、等等的總之是可自定義的選項(xiàng)都放到公共變量中。免于在數(shù)千行代碼之中為查找某個(gè)顏色而費(fèi)勁。
接著更改一下代碼，讓它讀起來是這樣的：
Ext.apply(myNameSpace.app, {btn1Text:'Taste 1', init: function() {try {btn1 = new Ext.Button('btn1-ct', {text: this.btn1Text, handler: btn1Handler, scope: this});}catch(e) {alert('錯(cuò)誤: "' + e.message + '" 發(fā)生在行： ' + e.lineNumber);}}}); // end of file
我們這里將init重寫了一篇，主要是在原來代碼的基礎(chǔ)上加入異常控制，以便能夠捕獲異常。試運(yùn)行一下看還有沒有其它的變化？
嗯 是的，出現(xiàn)了btn1Handler 未定義的錯(cuò)誤。這是因?yàn)樾碌暮瘮?shù)雖然嘗試訪問私有變量但它實(shí)際是不允許的。正如所見，原init是特權(quán)函數(shù)可訪問私有空間，但新的init卻不能。之所以不能訪問私有空間，是因?yàn)椋航雇獠看aNo code from outside，哪怕是嘗試重寫特權(quán)方法。
習(xí)筆記/11.2/TutorialApplication%20Layout%20for%20Beginners%20(Chinese)%20-%20Learn%20About%20the%20Ext%20JavaScript%20Library.files/kr.png)
