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




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

  


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章