介面布局淺匯

ext主要包括11種標準布局方式：auto(自動布局)、checkboxgroup(核取方塊組布局)、fit(自適應布局)、column(列布局)、accordion(摺疊布局)、table(**布局)、card(卡片式布局)、border(邊框布局)、anchor(錨點布局)、box(盒布局)、absolute(絕對位置布局)。

一.auto(自動布局)：預設布局方式，使用原始的html文件流來布局子元素，並把布局呼叫傳遞到子容器。

二.fit(自適應布局)：將使唯一的子元素充滿容器，如果在當前容器中存在多個子面板則只有第乙個會被顯示，**如下：

ext.create('ext.panel',,
layout : 'fit', 
items : [,
]});

fit圖例：

三.accordion(摺疊布局)：手風琴式布局，**如下：

ext.create('ext.panel', ,
layout : ,
items : [, , ],
renderto : ext.getbody()
});

accordion圖例：

四.card(卡片式布局)：該布局會包含多個子面板，任何時候都只有乙個面板處於顯示狀態，這種布局類經常用來製作嚮導和標籤頁。該布局的重點方法是setactiveitem，因為一次只能顯示乙個子面板，所以切換子面板的唯一途徑，就是呼叫setactiveitem方法。接收乙個子面板id或者索引作為引數。card布局並沒有提供乙個子面板的導航機制，導航邏輯需要開發人員自己實現。**如下：

var cardpanel = ext.create('ext.panel',, 
layout : 'card',
items : [,], 
buttons : [ 
}, }] 
});

card圖例：

五.anchor(錨點布局)：根據容器大小為其所包含的子面板進行定位的布局，如果容器大小發生變化，所有子面板的位置都會根據規則重新計算，並重新渲染。注意配置項的使用。

*anchorsize(父類提供)：用來設定虛擬容器的大小，預設情況下anchor布局是根據容器自身的大小來進行計算定位的，如果提供了anchorsize屬性則anchor布局就會根據該尺寸生成乙個虛擬容器，然後根據這個虛擬容器的大小來進行計算定位。

ext.create('ext.panel', ,,]
});

anchor圖例：

六.absolute(絕對位置布局):根據x、y座標進行定位。

七.checkboxgroup(核取方塊組布局):實現了按列布局表單元件ext.form.checkboxgroup 和 ext.form.radiogroup功能，**如下：

ext.create('ext.panel',
, items : [,]
},, , ,
,,] }]
});

checkboxgroup圖例：

八.column(列布局):這是一種多列風格的布局樣式，每一列的寬度都可以根據百分比或者固定值來進行設定，高度允許根據內容進行變化，它支援乙個特殊的屬性columnwidth，每乙個加入到容器中的子面板都可以通過columnwidth配置項指定百分比或使用width配置，來確定列寬。width配置項是以畫素為單位的固定寬度，必須是大於或等於1的數字。columnwidth配置項是以百分比為單位的相對寬度，必須是大於0小於1的小數，例如 ".25".固定值優先於百分比進行計算，也就是說，百分比計算的基礎寬度是父容器的寬度減去固定列寬之後剩餘的寬度值。**如下：

ext.create('ext.panel',, 
layout : 'column', 
items : [,,
] });

column圖例：

九.table(**布局):這種布局允許你非常容易地渲染內容到html**中，可以指定列數、跨行、跨列、可以建立出複雜的**布局。**如下：

ext.create('ext.panel.panel', ,
defaults : ,
items : [, , , ],
renderto : ext.getbody()
});

table圖例：

10.border(邊框布局)：將容器分為5個部分：east,west,north,south,center。通過region進行指定。

ext.create('ext.panel', ,, , ,],
renderto : ext.getbody()
});

border圖例：

11.box(盒布局):又分為hboxlayout(水平盒布局) 和 vboxlayout(垂直盒布局)，通過子元素的flex配置項來劃分父容器的空間。**如下：

ext.create('ext.panel', ,
renderto: document.body,
items: [,,]
});

box圖例：

介面布局淺匯

Android介面布局

WinForm介面布局

c 記憶體布局淺探（一）

介面布局淺匯

Android介面布局

WinForm介面布局

c 記憶體布局淺探（一）

相關推薦