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);
}
}
}
}
,
让我们看一下它的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); } } } }
,
