ext布局總的來說是很靈活的，因此我覺得有必要一塊**一下。
ext常用的布局都在ext.layout下，這裡幾乎涵蓋了所有的布局方式（但是值得注意的是通常我們不是直接通過"new"來建立這些類的物件然後往裡面新增控制項使用，而是作為控制項乙個配置屬性使用讓ext自動建立對應的類），滿足開發者需求。那麼我們就其中常用的方式逐一介紹。
border布局是ext中常用布局方式（經常用到整個頁面的總體布局），感覺用的機率很大。在看**之前先熟悉一種特殊的容器viewport，它是對於瀏覽器視窗的抽象，你可以將它理解為瀏覽器的可見區域，它將渲染到document.body並自動調整大小，乙個頁面只能建立乙個viewport。
new ext.viewport(, , , , ] });
上面的**很簡單，首先viewport將自動佔滿整個視窗，然後我們在viewport中使用border布局（就是上面的layout:'border'）。border布局的用法就是對於其子容器使用region來指示子容器所處的位置（例如上面region:'center'），之後子容器就會顯示在其父所在容器的相應位置，這些位置是固定的只有上面我們列出的五個。但是請注意這五個部分不是必須都有的，但是至少要包含"center"（因為它是主體，沒有主體如何放內容啊）。
效果：
上面的效果看起來不是太好看，而且我們上面說通常情況下我們沒有必要五個部分都有的，那麼我們稍微修改一下：
var pnnorth=new ext.panel(); var pnwest=new ext.panel(); var pncenter=new ext.tabpanel( ] }); var vp=new ext.viewport();
效果：
還不錯吧！
從字面就知道column布局就是列布局，例如我乙個panel中還有兩個子panel現在想要左側顯示乙個右側顯示乙個怎麼辦？這是可以選擇column將父panel分為兩列，左側乙個右側乙個。
var pnsub1=new ext.panel(); var pnsub2=new ext.panel(); var pn=new ext.panel();
效果 首先在父容器中設定"layout"為"column"然後在子容器中指定"columnwidth"的值（是比例）就可以顯示了，很簡單。
如果從複雜度來說fit布局應該算是最簡單的了，設定是最少的。fit布局同樣也是設定父容器的layout屬性，但是子容器不用設定任何相應屬性。它的目的就是為了讓子容器能夠自適應于父容器（用了fit布局子容器設定寬度無效），但是請注意如果父容器有多個子容器，只會顯示第乙個。
var pnsub1=new ext.panel(); var pnsub2=new ext.panel(); var pn=new ext.panel();
效果：
可以看出只顯示了第乙個panle，而且它是自適應的，我們沒有設定高度和寬度。
table布局多數用在較為複雜的情況下，想一想做web開發總不能就上面幾種簡單情況吧，因此也就是說table布局還是很常用的。當然，但是和其他布局相比其引數設定也稍微一些（不用怕，事實上還是很少的）。
new ext.panel(, defaults:, items:[ , , , ] });
效果：
我們上面的布局就是兩行三列的布局，但是注意一點在layoutconfi中我們無需指定有幾行，只要指定由幾列就可以了，有幾行往下寫幾行就可了。另外一點就是對於合併行列的時候記得指明高和寬否則可能出現你合併的行跟未合併的單元格一樣高的情況。同ext中多數布局一樣也是在父容器指定對應的布局為"table"，然後子容器設定對應的引數（對table布局就是colspan等）。
上面的布局或許有些幼稚，真正這樣做的不太多，我們稍微修改一下：
new ext.panel(, defaults:, items:[ , , ] });
注意，還有樣式：
#pn td
效果：
上面看起來還可以吧，這就是table布局出來的啊，o(∩_∩)o~！
這個布局是專門為表單而設計的布局方式，當然多數是用在formpanel中（它也是formpanel預設的布局方式）。我們前面說過formpanel但是沒有涉及複雜布局，事實實際應用中更多的是較複雜的布局。
比較一下下面兩幅圖有什麼區別，我想除了標題是沒有任何區別的吧，但是事實上這是兩種元件，乙個是panel另乙個是formpanel：
new ext.panel(, ] }); new ext.formpanel(, ] });
從**我們也可看出來，區別就是對於panel我們配置了layout為form，從這也能看出來說formpanel預設的布局就是form布局，所以對於習慣於用panel而不習慣用formpanel的朋友儘管用panel,但是一定要考慮好提交的問題，如果使用panel的話，要做提交可是要乙個個獲得控制項的值的，而frompanel則不需要。
另外一我們需要擴充套件一下，因為實際的布局要比這複雜。
這個表單雖然不算是太複雜，但是比較有代表性，基本上常用的控制項都放上去了，也包含了常見的radio多列布局。好了看**吧：
ext.onready(function() ] }), new ext.panel( ] }), new ext.panel( ] }) ] }); var pnrow2=new ext.panel( ] }), new ext.panel( ] }) ] }); var pnrow3=new ext.panel( ] }), new ext.panel( ] }), new ext.panel( ] }) ] }); var pnrow4=new ext.panel( ] }); var pnrow5=new ext.panel( ] }); new ext.formpanel(); });
**看似比較多，其實很容易理解，ext有乙個特點就是元件的自由組合，那麼我們只需要拆分來看就可以了。從大的方面是乙個formpanel，其中有五行內容（這個五個panel當然是使用的父容器formpanel的預設布局"form"了，所以依次向下放）。先暫且不管第四行和第五行，我們看看其他三行，其實格式基本上是一樣的，就是首先這一行放到乙個panel中(假設叫做panel_a)，利用"column"布局來解決多列問題，讓後再其item中我們再再每個column中放乙個panel(panel_b)而這個panel我們使用"form"布局（這個panel中其實都只有乙個form控制項，所以當然不用form布局也是可以的，之所以用form布局是為了能夠使用labelwidth這樣的form特有屬性），然後在其中放乙個form控制項，這樣也就解決了多列布局的問題。關於第四列和第五列本身就是單列的也沒有什麼好解釋的。上面的方法是通用的，基本上用這種方法所有的複雜表單布局都可以解決了。可能會有人問遇到合併行的怎麼辦？其實利用上面的方法很容易的，例如假設上面"性別"和"學歷"是合併的，那麼我們就沒有必要用兩個panel放兩行了，就當做一行，只不過在第一列的panel_b中放兩個form控制項就可以了（因為它是form布局，預設就會在兩行）。
那麼還有沒有其他方法呢？答案是肯定的，那就是table布局，個人感覺對於較為規則的多列布局用table還是不錯的，不過像上面的例子這樣從總體上看是兩列的布局，但是有些列裡面又是多列我認為用table也是太簡單。
上面說了接種布局，其實簡單總結起來border布局一般作為頁面整體布局來使用；fit布局適用於那種需要將子類完全佔滿父類容器的情況；column布局用於多列；form是一種表單特有布局方式，實質是一行一控制項的形式；table布局適用多行多列但是有時寬高不太容易控制。而且值得強調的一點就是給乙個控制項設定layout屬性，其實指的是其內部控制項的布局方式而不是它本身的布局，這點要搞清楚。
React Native 之布局篇
一.flex布局 什麼是flex布局?布局的傳統解決方案,是基於盒子模型,依賴display屬性 position屬性 float屬性,這種布局方式對於特殊布局非常不方便,比如,垂直居中就不好實現.2009年,w3c提出的flex布局,即彈性布局,用來為盒子模型提供最大的靈活性,任何乙個容器都可以指...
CSS之布局篇
flex 布局教程 語法篇 阮一峰 flex 布局教程 例項篇 阮一峰 grid網格布局教程 阮一峰 html 中 main部分首先要放在cotent的最前部分。然後是left,right 將三者都 float left 再加上乙個position relative 因為相對定位後面會用到 main...
ExtJS 經典布局
先看看布局的效果 借用靚女的靚照就可以讓窗體顯得更加漂亮了,秘訣 下面再看看源 吧.這句是存放的地方 function logindemo 右上方顯示管理系統幾個字 var right toppanel new ext.panel 右下方顯示輸入框和按鈕 var right bottompanel ...