最快捷測試Ext對象屬性的方法

原創

2020-02-21 01:45

最快捷測試Ext對象屬性的方法
1：前言
你已經聽過Ext，在網上也看了很多例子，而且決定從讀API開始學習Ext。好吧，我們言歸正傳，你渴望去學習演示Ext，但是，如果我們沒有一個服務器，或者一個環境去演示，那我們怎麼辦？現在，我就告訴你。
2：準備
你研究了API並且你看到了很多有趣的方法你想去立馬試試，但是，你總不希望就爲了看那一點的功能，我得把Ext的所有的可用的配置搭建起來，僅僅是爲了只看那一個有趣的方法，這樣，太浪費時間了。
不管出於什麼樣的原因，這裏有一個很簡單的快速的方式去立馬演示Ext，不需要服務器，你需要的僅僅是火狐瀏覽器，而且，必須是裝了FireBug的火狐，如果你現在還沒有，那麼就趕緊去下載安裝上他吧！
3：接下來怎麼做
Ⅰ用火狐瀏覽器打開Ext的API幫助文檔，就在這個網頁http://www.extjs.com/deploy/dev/docs/上面（一定是在這個API的網頁上面），我們會得到我們意想不到的驚喜；
Ⅱ按下火狐瀏覽器的快捷鍵F12，或者自己另行打開FireBug，看到Firebug的控制檯了麼？

Ⅲ如果你看到你的控制檯有一行是這樣‘>>>’，然後你順着點擊那個微小的紅色的按鈕，它在右下角，然後點擊之後，它會彈出來一個窗口，我們可以在這裏面編輯腳本；

Ⅳ首先敲入第一行，

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

敲完之後按Ctrl-Enter去運行它.
我們可以看到，整個網頁變成了一個div塊，方纔的網頁不見了，那麼，這就說明我們的腳本成功了。原因是爲什麼呢？那是因爲，儘管剛纔的API網頁不見了，但是它的類庫腳本還在加載在我們的瀏覽器之上。

現在，如果假設，我們看到了Ext.Panel的API，我們想測試下Panel，那麼，就在我們看Panle的API的這個頁面上面，我們再在我們剛此的代碼上面加上這些代碼，加上剛纔的代碼，也就是下面這個樣子：

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鍵，發現什麼沒有，我們看到這樣的界面：

如果說我們想測試下加入一個屬性會是什麼樣子的，那麼我們就可以直接在構造器裏面配置，比如我們現在給Panel加入一個collapsible（可收放）的屬性。那麼，我們在之前的代碼上面，在額外的加上新的一行配置屬性信息。如下：

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鍵的時候，那個代碼框會重新加載新的代碼，所以，如果我們想加載其他的Dom對象，或者測試dom對象，那麼我們得自己把代碼框的代碼清理掉，重新編寫新的腳本。
最後，
You can add as much HTML as you need in the string passed to the update() method in the first line, and then write as much Javascript as you like to explore the Ext API.