鼓勵此網誌：0
從 2009.09.15 寫到現在......有那麼複雜嗎？＝ ＝b
由於最近幫忙修改或是開發 UI，
對 Extjs 的 layout 有一些心得，
故分享於此。
這邊只列出我用過的 layout，
並且我使用的是 2.0 版本，
所以很多 layout 可能都沒有碰過，
但這些 layouts 應該是大部分使用 Extjs 都常用到的。
【layout: "border"】
我挺喜歡這個 layout，因為擺起來最漂亮，其 layout 內的位置配置如下圖所示：
以此 layout 配置的每一個 items 都要定義「region」，
好確定其放在哪個位置。
但這個 layout 放在 dialog 的 tab panel 中，如果沒有每一個位置都有 item 放置的話會有問題。（好像只有在 IE 有問題）
年代久遠（噗），我已經忘記是怎樣的問題，
只依稀記得就是無法設計出自己想要的版型，
但如果不是 tab panel 而是普通的 dialog panel 的話就不會有問題。
很可惜哪，因為這個 layout 的配置畫面真的挺好看的......
有關 border layout 放在 tab panel 的相關議題可參考「[2.0rc1] BorderLayout resize problem in IE when panel is hidden - Ext JS Forums」。
【layout: "column"】
這應該也是最常用的一種 layout，
將版面切成幾行，然後每行內放一個 item。
1: var panel = new Ext.Panel({ 2: title: 'Column Layout', 3: layout:'column', 4: items: [{ 5: title: 'Column 1', 6: width: 120 7: },{ 8: title: 'Column 2', 9: columnWidth: .8 // percentages -- all columnWidth values must add up 10: },{ 11: title: 'Column 3', 12: columnWidth: .2 13: }] 14: }); |
需要設定 width，以免 items 擠在一起，
但如果碰到 item 內的字串可變大可變小時，
就有字串被截掉的危險。
【layout: "table"】
不同於其他 layout 是用 <div> 來達成，
這事實上就是一個 <table> 元件，
所以用法也跟 table 語法類似。
以下範例來自 Extjs：
1: // This code will generate a layout table that is 3 columns by 2 rows 2: // with some spanning included. The basic layout will be: 3: // +--------+-----------------+ 4: // | A | B | 5: // | |--------+--------| 6: // | | C | D | 7: // +--------+--------+--------+ 8: 9: var table = new Ext.Panel({ 10: title: 'Table Layout', 11: layout:'table', 12: defaults: { 13: // applied to each contained panel 14: bodyStyle:'padding:20px' 15: }, 16: layoutConfig: { 17: // The total column count must be specified here 18: columns: 3 19: }, 20: items: [{ 21: html: '<p>Cell A content</p>', 22: rowspan: 2 23: },{ 24: html: '<p>Cell B content</p>', 25: colspan: 2 26: },{ 27: html: '<p>Cell C content</p>', 28: cellCls: 'highlight' 29: },{ 30: html: '<p>Cell D content</p>' 31: }] 32: }); |
跟 column 相比最大的好處，
在於不限定寬度時，其欄位會隨著內容大小而縮放，
比較不會有字串被截掉的危險。
【layout: "form"】
這個 layout 也很常用，
在時常交手的情況下，得到許多有些慘痛的經驗（何），
以下條列幾項：
- 假如發現 button, combo box 等控制項，設定了 label 屬性但是都無法顯示時，可能就是因為沒有包在 form layout 中。
- 當發現某些控制項的 side-tips 無法顯示時，原因同上。
- 當在 IE 中發現 combo box 的底線不見時，原因同上。（參考這篇）
但我不懂，為什麼不是這個 layout 就會出現這些現象啊？
可能要 trace 一下 code 才知道吧......＝ ＝
