Extjs4 常用布局總結

1.anchor 固定布局 

  子組件尺寸相對于容器的尺寸，即父容器容器的大小發生變化時，使用anchor布局的組件會根據規定的規則重新渲染位置和大小( width:500,height:300, )。一般與布局column一起使用。設置相對于父容器的百分比。

2.absolute 絕對布局 X/Y坐標定位

3.accordion 手風琴布局 類似于QQ面板的好友分組

4.border    邊框布局  將容器分為 east south west north center 5部分

5.card      卡片布局  類似于tabpanel 

        card布局一次只能夠顯示一個面板

        card布局提供方法讓我們可以在一堆特定面板之間來回切換

6.table  表格布局  常用屬性 columns   colspan  rowspan

7.column 列布局    常用屬性 columns   columnwidth （相比較table而言有點類似 但是column布局無法調整 每個控件之間的間隔，只能采用樣式來處理 sample：style:"margin-left:10px;margin-right:10px;",）

8.fit 布局  

   子元素將自動填滿整個父容器（對元素設置寬度無效），如果容器組件中有多個子元素，則只會顯示第一個子元素。

9.form 表單布局 

   FormPanel有兩種布局：form和column，form是縱向布局，column為橫向布局。默認為后者。使用layout屬性定義布局類型。對于一個復雜的布局表單，最重要的是正確分割，分割結果直接決定布局能否順利實現。

如果不再使用默認布局，那么我們必須為每一個元素指定一種布局方式，另外，還必須遵循以下幾點：

【1】落實到任何一個表單組件后，最后總是form布局

【2】defaultType屬性不一定起作用，必須顯式為每一個表單組件指定xtype或new出新對象

【3】在column布局中，通過columnWidth可以指定列所占寬度的百分比，如占50%寬度為.5。

    以上是extjs的幾種常用布局  實際開發經常要將幾種布局混合使用進行頁面布局  這就要求我們必須熟練掌握每種布局的特點。

網上其他相關總結鏈接：

http://my.oschina.net/u/1398304/blog/291341

http://www.myexception.cn/javascript/2018318.html

http://www.iteye.com/topic/1135763

http://www.cnblogs.com/knowledgesea/archive/2013/08/28/3286661.html

http://wenku.baidu.com/link?url=6rNzED6IFoCOipxJLizPIamjR-R8d0iRNvJeWfR99nopeLrVRpdWIIIokF2Bi1LoR1e1VYVit_ZBuJvr-tJ2fPVfV--PyPJT1cDUV6eFYbW

自己以前總結的 寫個博文以備不時之需。