liubijin

FF是深受廣大程序員喜愛(ài)，不是因?yàn)樗目欤且驗(yàn)镕IREBUG1.2版本（點(diǎn)這里 ）這個(gè)宇宙無(wú)敵插件，調(diào)試JS程序變成了一片小蛋糕。
不過(guò)，新推出的FireFox 3.0，據(jù)稱(chēng)比2.0速度提高2倍，內(nèi)存占用減小，幾乎與蘋(píng)果的Safari速度不相上下。或許會(huì)改變大家的看法。
Spket的JS編輯器，強(qiáng)啊，實(shí)時(shí)提示語(yǔ)法錯(cuò)誤，自動(dòng)完成，CTRL+SHIFT+F的縮進(jìn)排版，啥也不說(shuō)了，眼淚嘩嘩的。EXT就不說(shuō)了，地球人都知道。

蹣跚學(xué)步

第一步 - 入門(mén)

想必您已經(jīng)聽(tīng)說(shuō)過(guò) Ext、瀏覽了在線演示，并且嘗試閱讀API文檔。不過(guò)，面對(duì)復(fù)雜的API文檔，您卻不知如何下手？！

第二步 - 起步

通覽過(guò)API文檔，并且找到了所要立刻嘗試的功能，面對(duì)混雜的網(wǎng)頁(yè)源代碼，如何開(kāi)始一個(gè)簡(jiǎn)單的測(cè)試頁(yè)面？那么……

不論您的目標(biāo)是什么，您都可以依照本文快速的開(kāi)始使用Ext。不，不用搭建服務(wù)器，您所需要的僅僅是Firefox瀏覽器和Firebug調(diào)試插件。如果還沒(méi)有安裝，那么現(xiàn)在就是一個(gè)好機(jī)會(huì)。

牛刀小試

• 打開(kāi)Ext API文檔，您已經(jīng)上路！
• 單擊 F12 打開(kāi) Firebug 控制臺(tái)。
• 如果您的 firebug 控制臺(tái)處于單行模式（以 '>>>' 開(kāi)頭），那么請(qǐng)單擊右下角的紅色上箭頭以開(kāi)啟多行編輯模式。
• 輸入以下代碼，并敲擊 Ctrl-Enter 來(lái)運(yùn)行:

Ext.get(document.body).update('<div id="test"></div>');

上邊這行代碼的作用是將當(dāng)前DOM body元素用一個(gè)ID為test的div元素替換。剛才那些API文檔已經(jīng)被刪除，但 Ext 代碼依舊生效，并且隨時(shí)為您效勞。

現(xiàn)在，我們假設(shè)您希望簡(jiǎn)單的添加一個(gè)面板元素（Panel），但對(duì)Ext.Panel的API冗繁的說(shuō)明無(wú)能為力。那么試著將這些代碼添加到 firebug 的控制臺(tái)中：

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content'
});

再次敲擊 Ctrl-Enter 。嗨！您的面板元素已經(jīng)誕生。

很好，不過(guò)如果修改一些選項(xiàng)呢？用下邊的代碼替換剛才的那些代碼：

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content',
collapsible: true
});

敲擊 Ctrl-Enter 。怎么樣，一個(gè)可以伸縮的面板就配置好了。（注意面板右上角的小圖標(biāo)）

每次敲擊 Ctrl-Enter ，第一行代碼都會(huì)移除現(xiàn)有的內(nèi)容，這樣您就可以有一個(gè)干凈的調(diào)試環(huán)境。這是一個(gè)簡(jiǎn)單的小技巧，十分方便您嘗試各種配置選項(xiàng)。

您可以為update()函數(shù)添加所需要的 HTML 代碼，無(wú)論多少。然后編寫(xiě)或多或少的 Javascript 來(lái)探索 Ext API。

還等什么？現(xiàn)在就去親自實(shí)踐 Ext Api 吧。

• Ext Programmer's API Documentation
• Ext User Forums

Retrieved from "