小道Ext架构-最简单的layout:AnchorLayout
最简单的layout:AnchorLayout
AnchorLayout是最简单的布局管理其，它只是将元素按照配置的属性在元素容器中进行定位。
让我们看一下它的render方法以理解如果进行布局：
onLayout : function(ct, target){
Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct,
target);
//获取元素的尺寸
var size = this.getAnchorViewSize(ct, target);
var w = size.width, h = size.height;
if(w < 20 || h < 20){
return;
}
// 获取容器的尺寸
var aw, ah;
if(ct.anchorSize){
if(typeof ct.anchorSize == 'number'){
aw = ct.anchorSize;
}else{
aw = ct.anchorSize.width;
ah = ct.anchorSize.height;
}
}else{
//根据配置获取容器尺寸
aw = ct.initialConfig.width;
ah = ct.initialConfig.height;
}
//遍历元素，并调用元素的setSize方法，继承自boxComponent的setSize方法则触发resize事件从而触发layout方法。
var cs = ct.items.items, len = cs.length, i, c, a, cw, ch;
for(i = 0; i < len; i++){
c = cs;
if(c.anchor){
a = c.anchorSpec;
if(!a){ // cache all anchor values
var vs = c.anchor.split(' ');
c.anchorSpec = a = {
right:
this.parseAnchor(vs[0], c.initialConfig.width, aw),
bottom:
this.parseAnchor(vs[1], c.initialConfig.height, ah)
};
}
cw = a.right ?
this.adjustWidthAnchor(a.right(w), c) : undefined;
ch = a.bottom ?
this.adjustHeightAnchor(a.bottom(h), c) : undefined;
if(cw || ch){
c.setSize(cw || undefined, ch ||
undefined);
}
}
}
},