Tutorial:Playing With Ext The Easy Way (玩EXT簡單方法)--firebug下調試ext

周五, 12/21/2007 - 02:45 — ppkosd

蹣跚學步

第一步 - 入門

想必您已經聽說過 Ext、瀏覽了在線演示，并且嘗試閱讀API文檔。不過，面對復雜的API文檔，您卻不如何下手？！

第二步 - 起步

通覽過API文檔，并且找到了所要立刻嘗試的功能，面對混雜的網頁源代碼，如何開始一個簡單的測試頁面？那么……

不論您的目標是什么，您都可以依照本文快速的開始使用Ext。不，不用搭建服務器，您所需要的僅僅是Firefox瀏覽器和Firebug調試插件。如果還沒有安裝，那么現在就是一個好機會。

firebug使用教程

牛刀小試

• 打開Ext API文檔，您已經上路！
• 單擊 F12 打開 Firebug 控制臺。
• 如果您的 firebug 控制臺處于單行模式（以 '>>>' 開頭），那么請單擊右下角的紅色上箭頭以開啟多行編輯模式。
• 輸入以下代碼，并敲擊 Ctrl-Enter 來運行:

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

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

現在，我們假設您希望簡單的添加一個面板元素（Panel），但對Ext.Panel的API冗繁的說明無能為力。那么試著將這些代碼添加到 firebug 的控制臺中：

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 。嗨！您的面板元素已經誕生。

很好，不過如果修改一些選項呢？用下邊的代碼替換剛才的那些代碼：

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 。怎么樣，一個可以伸縮的面板就配置好了。（注意面板右上角的小圖標）

每次敲擊 Ctrl-Enter ，第一行代碼都會移除現有的內容，這樣您就可以有一個干凈的調試環境。這是一個簡單的小技巧，十分方便您嘗試各種配置選項。

您可以為update()函數添加所需要的 HTML 代碼，無論多少。然后編寫或多或少的 Javascript 來探索 Ext API。

還等什么？現在就去親自實踐 Ext Api 吧。