?
最简单的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);
? ? ? ? ? }
? ? ? ? }
? ? }
? },