Ext架构分析(6)--最简单的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);
          }

        }

    }

  }
,
posted @ 2008-05-23 22:35 meetrice 阅读(...) 评论(...) 编辑 收藏