絕對布局（Ext.layout.container.Absolute）

絕對布局讓我回想到了使用Foxpro開發(fā)的時(shí)候，哪時(shí)候的界面布局就是這樣，通過設(shè)置控件的左上角坐標(biāo)（x，y）和寬度來進(jìn)行的，因?yàn)檩斎肟丶母叨然臼枪潭ǖ?#xff0c;所以不需要設(shè)置。在可視化編程沒有出現(xiàn)之前，開發(fā)界面算是個(gè)苦差事，因?yàn)椴季质切枰ㄙM(fèi)不少功夫的，例如想要在已經(jīng)定義好的組件中插入一個(gè)組件，那就得重新修改插入位置以下的組件的坐標(biāo)，這工作是比較枯燥無聊的，因而，在沒必要的情況下，還是少選擇這種布局模式。

絕對布局是使用CSS的絕對定位（absolute）實(shí)現(xiàn)的，因而在使用的時(shí)候需要定義子組件的左上角坐標(biāo)、寬度和高度。在CSS中，絕對定義是使用left和top來定義左上角坐標(biāo)的，而在Ext JS中，則轉(zhuǎn)換為習(xí)慣的x、y來代替。寬度和高度可以分別使用width和height來定義，也可以是anchor來定義。使用anchor的好處是子組件會根據(jù)容器的尺寸變化來調(diào)整子組件的尺寸，從而保證不會在容器變小的時(shí)候，只能顯示部分子組件，而在容器大了的時(shí)候，顯示一片的空白區(qū)域。

使用anchor來定義寬度和高度也有三種方式，一種是使用百分比來定義，如“90% 95%”，這里表示的是子組件的寬度是容器寬度的90%，高度為容器高度的95%，一種是使用偏移量，如“-20 -5”,這里表示的是子組件的右邊界將便宜容器的右邊界-20像素，也就是兩個(gè)邊界相距20個(gè)像素，而-5則表示子組件的底部邊界與容器的邊界相距5個(gè)像素。如果你使用正值，那子組件的顯示就會超出容器，一般絕少這樣設(shè)置。最后一種方式就是混合以上兩種方式的方式，也就是寬度用百分比，高度使用偏移量，或?qū)挾仁褂闷屏?#xff0c;而高度使用百分比。如果子組件的高度是固定的，以上三種方式也可只設(shè)置一個(gè)值，也就是只設(shè)置子組件的寬度。

錨布局（Ext.layout.container.Anchor）

錨布局是表單面板的默認(rèn)模板，因而是一種常有的布局，它的好處就是子組件可根據(jù)容器尺寸的變化而調(diào)整。在表單面板中使用anchor布局，就可避免在表單面板變小后，輸入組件的長度會超出表單面板的訪問，而變大的時(shí)候則不會留下一片空白。

要使用錨布局，除了要在容器中將layout定義為“anchor”，還需要在子組件中使用anchor配置項(xiàng)來定義子組件的高度和寬度。配置項(xiàng)anchor的使用方法與絕對布局中的anchor配置項(xiàng)的使用方法是一樣的，這里就不再贅述了。

列布局（Ext.layout.container.Column）

在Ext JS 2沒有水平盒子布局的時(shí)候，只能使用列布局進(jìn)行列的劃分，自從有了水平盒子布局，就很少使用列布局了。不過，咸魚白菜各有喜好，能實(shí)現(xiàn)所需效果才是最終目的。

要使用列布局，除了要在容器中將layout定義為“column”，還需要在子組件中定義寬度。寬度的定義方式有兩種，一是直接使用width來定義，這種方式不要的地方是寬度固定，不能隨容器的變化而進(jìn)行調(diào)整；第二張方式是使用columnWidth，通過設(shè)置百分比（值用小數(shù)來表示）來設(shè)置列寬，這種方式的好處就是列寬可隨容器大小的變化調(diào)整列寬。

手風(fēng)琴布局（Ext.layout.container.Accordion）

手風(fēng)琴也是一種常有的布局。它派生于垂直盒子布局，在原理上其實(shí)也差不多，把容器垂直劃分為幾個(gè)區(qū)域，只有一個(gè)區(qū)域是展開來顯示標(biāo)題和內(nèi)容的，其他區(qū)域都是折疊只顯示標(biāo)題的。當(dāng)然，手風(fēng)琴布局也可以同時(shí)顯示多個(gè)展開區(qū)域，這個(gè)要在layout的配置對象中將multi配置項(xiàng)設(shè)置為true。

由于手風(fēng)琴布局需要顯示標(biāo)題，而它自己不會去創(chuàng)建一個(gè)這樣的標(biāo)題，只使用容器類的標(biāo)題，因而，在使用手風(fēng)琴布局的時(shí)候，子組件必須選擇是帶有標(biāo)題且能折疊的容器類，如面板、表單面板、樹面板等。

使用手風(fēng)琴布局，只需要在容器中將layout定義為“accordion”就行了。如果喜歡活動(dòng)面板始終位于容器定義，可在layout的配置對象中設(shè)置activeOnTop為true。默認(rèn)情況下，面板的折疊只能通過單擊面板折疊按鈕來實(shí)現(xiàn)，如果希望單擊標(biāo)題欄就實(shí)現(xiàn)折疊，可在layout的配置對象中設(shè)置titleCollapse為true。如果希望切換時(shí)顯示動(dòng)畫，可設(shè)置animate為true。如果希望隱藏面板標(biāo)題中的折疊按鈕，可設(shè)置hideCollapseTool為true，這時(shí)候，titleCollapse會被自動(dòng)設(shè)置未true。

表單布局（Ext.layout.container.Form）

表單布局與錨布局有點(diǎn)類似，都允許子組件隨容器尺寸的變化而調(diào)整子組件的大小，不過這只限于輸入字段，因而一般只用于只有輸入字段的容器。它與錨布局的不同之處在于不需要在子組件定義anchor配置項(xiàng)。

對于輸入字段來說，表單布局與錨布局的實(shí)現(xiàn)方式是一樣的。他們都是通過樣式來實(shí)現(xiàn)效果的，在輸入字段的封裝DIV中，使用了樣式“display: table;”，也就是說該DIV的行為與HTML表格的行為是一樣的，而對于輸入字段的標(biāo)簽和輸入框，使用的樣式是“display: table-cell;”，也就相當(dāng)于把輸入字段的封裝DIV劃分成了表格的兩列。其中一列顯示標(biāo)簽，另一列顯示輸入框。由于表格會自動(dòng)跟隨父容器的尺寸變化而調(diào)整自身的尺寸，這也就實(shí)現(xiàn)了子組件跟隨容器尺寸的變化而自動(dòng)做相應(yīng)的調(diào)整。表單布局與錨布局的不同在于表單布局不會去計(jì)算輸入字段的封裝DIV的寬度，直接設(shè)置未100%，而錨布局會根據(jù)設(shè)置去計(jì)算封裝DIV的寬度和高度。而這也是錨布局內(nèi)可使用任何子組件，而表單布局內(nèi)只能使用輸入字段的一個(gè)原因，因?yàn)殄^布局可根據(jù)設(shè)置去計(jì)算子組件的寬度和高度，而表單布局則不會。如果在表單布局內(nèi)使用非輸入字段類的組件，由于沒有計(jì)算過程，就等于使用了自動(dòng)布局，子組件的尺寸默認(rèn)是多少就是多少了，不會去做調(diào)整，而輸入字段自身的表格特性不需要這樣的計(jì)算就能正確。

使用表單布局，只需要在容器中將layout定義為“form”就行了。使用labelWidth可設(shè)置輸入字段的標(biāo)簽的寬度。

表格布局（Ext.layout.container.Table）

表格布局是使用TABLE元素實(shí)現(xiàn)的布局，因而，一般情況，其他布局能實(shí)現(xiàn)的效果，就不要建議使用該布局。

使用表格布局，除了要將布局類型定義為table，還需要使用columns來定義表格的列數(shù)。要定義表格的屬性，可使用tableAttrs配置項(xiàng)；要定義行的屬性，可使用trAttrs配置項(xiàng)；要定義單元格的屬性，可使用tdAttrs配置項(xiàng)。

如果沒有特別說明，容器會依子組件的定義次序?qū)⒆咏M件寫入表格第一個(gè)中，如定義了2列，3個(gè)子組件，則第一個(gè)子組件會渲染在表格的第一行第一列，而第二子組件會渲染在第一行第二列，第三個(gè)子組件會渲染在第二行第一列。如果要實(shí)現(xiàn)跨列，則可在子組件中使用colspan配置項(xiàng)來聲明跨幾列，要跨行，則使用rowspan配置項(xiàng)。要定義單元格的id，可使用cellId配置項(xiàng)。要定義單元格的樣式，可使用cellCls配置項(xiàng)。

小結(jié)

在使用Ext JS的時(shí)候，顯示錯(cuò)誤多半是使用了錯(cuò)誤的布局造成的，因而，能熟練的使用布局是相當(dāng)重要的。而要能熟練使用布局，最好的方式就是能了解各種布局在頁面中是如何實(shí)現(xiàn)的，并了解這些實(shí)現(xiàn)的特性，從而對布局了然于胸，這樣，就不怕用錯(cuò)布局了。

在下文，將介紹面板。

請大家尊重作者的辛勤勞動(dòng)，未經(jīng)允許，請不要轉(zhuǎn)載本文，畢竟讀者的支持是作者撰寫文章的動(dòng)力。

轉(zhuǎn)載于:https://www.cnblogs.com/hainange/p/6334122.html

超強(qiáng)干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的谈谈Ext JS的组件——布局的使用方法续二的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。