ExtJs自學教程(2)：從DOM看EXTJS

《二》 從DOM看EXTJS

  看標題可能有人會問，為啥好好的例子不看，得從DOM看起呢？答案是目標只為了一個：自運行結果把EXTJS看得更清楚點

  首先，要看得靠點工具，帶點放大鏡什麼吧？對。我們需要的工具就是Internet Explorer Developer Toolbar(簡稱IEDevToolBar)，它是一個IE查看DOM的結構的工具，還具備Style Trace，Debug style的功能，可謂功能強勁。我們在IE下分析DOM結構，靠的就是它了。當然，如果你選擇FireFox，fireBug也是一個不錯的選擇，但是通常客戶要求的是優先支援IE，那麼還是在IE下調試的好。

  那麼，簡單的講講IEDevToolBar的使用，看：



  最左邊的是頁面的DOM樹查看區，中間是屬性和樣式編輯區，該區可以自增加和修改某個元素的屬性和樣式，這樣就可以快速的調試某個屬性了, Show Read-Only Properties可以查看唯讀屬性。右邊是當前的樣式查看。Show Default Value 可以查看預設的css樣式。在Current Style裡，也有一個很特別的功能，就是在某個樣式資訊上點右鍵，可以Trace Style，從而跟蹤到該樣式是由哪個css控制的，這樣就能很快的定位到某個樣式的調試需要修改哪個css。選擇某個元素，你既可以通過箭頭選擇工具（ID Developer Toolbar上第一排工具條第一個）來選擇，也可以通過直接在DOM樹裡選擇某個結點。在DOM樹裡選擇的結點在HTML頁面裡會先邊框閃爍一會，再顯示為一個藍色的框。通過滑鼠工具選擇的，則直接加上一個藍色的框。

  簡單的介紹過了，接下來的。我們要用這個工具去解決一些存在的問題。

首先，編寫一小段代碼，實現一個簡單的panel顯示效果：

new Ext.Panel({ renderTo: 'panelDiv', title: '標題', width: 200, height: 200, frame: true, items:[{ xtype: 'button', text: '按鈕' },{ html: '一些文本' }], buttons:[{ text: '底部按鈕' }] });

運行效果如下：



  這是一個最常見不過的Ext Panel相關應用的實現。開啟看到發現原DIV並沒有改變，只是在其內部增加了一系列的DIV。這樣你就清楚了，renderTo並沒有改變原來的對象。而是在其內部產生了一系列的PANEL形成我們看到的組件效果。依次看各DIV的class命名，你會發現Ext的css命名是很合理的。都帶有當前對象的xtype名，例如當前這個panel就成了"x-panel"。

  好了，DIV內部暫時不細說了。目前既然要解決問題，那麼我們先“製造”點麻煩（一般想成為高手都得沒事找點麻煩的，例如順著不走倒著走之類）。 

一個很小的改動，把 frame: true 給去掉，看渲染，看看成啥樣了：



得，“一些文本”那部分被一個難看的框給框住了。接下來就要開始分析了。從<div id=panelDiv>開始一級級找下來，找到<DIV class=x-panel id=ext-comp-1003>這個，看選擇的形狀。和出問題的那個框差不多了。根據這個class使用的名稱為x-panel和原始碼看來。選擇的這個就是代碼:
{ html: '一些文本' }
產生的這部分了。 接下來便需要跟蹤這部分的樣式了，看看究竟是哪裡出了問題。從id=ext-comp-1003這個出發向下級就3個結點，找起來也比較快。

  懂點css的就知道，如果不是內部覆蓋顏色，那麼邊框效果就是border製造出來的了。通過IEDevToolBar的選擇查看形狀(選擇結點查看形狀這個很有用，能協助我們快速的定位到處理的結點)，不是通過覆蓋顏色做出的邊框效果。那麼肯定是border-color製造的問題了。跟蹤第一級，Current Style裡border-width均為0，跟蹤第二級，裡面根本沒去定義border-width，那麼繼續向下找。跟蹤第三層級，問題找到了。


看畫圈的部分，由於設定了border為1px，導致了我們發現的難看的邊框的出現。這樣就想到了設定style，根據class的命名，我們推測是body的style的問題。那麼“想當然”，我們設定一下bodyStyle看看:

},{ bodyStyle: 'border:none', html: '一些文本' }],

OK了！是不是很有成就感。先Cheers一下~

....
....

然後很遺憾的告訴你，API裡其實已經詳細的說了：

bodyBorder : Boolean 
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when border == true. If border == true and bodyBorder == false, the border will display as a 1px wide inset border, giving the entire body element an inset appearance. 

那麼就是說，把子項目的border設定為false，問題就解決了。

  發現API的重要性了吧？其實很多問題，文檔上面都已經詳細的說了，只怪你沒仔細看：），不過不要懊惱，這不是忽悠你，只是告訴你，有這樣一種解決問題的途徑而已。所謂條條大路通羅馬，有了從DOM的角度去分析Extjs，就多了一條問題的解決方案。能問題的解決方案都是可性方案，至於哪條最好，這就得靠你自己多“磨練”了。例如調整form layout的label寬度和合適的元素位置，有了IEDevToolBar的協助，將會變得方便很多。

  至此兩章，該教程也就完結了。從API使用ExtJs是編寫功能代碼去產生功能頁面，而本章則是由頁面結果去反向分析功能代碼。一正一反，對比學習。

摘自 特種兵—AK47