小谈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);
          }
        }
    }
  },