/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/** * @class Ext.layout.AnchorLayout * @extends Ext.layout.ContainerLayout *

This is a layout that enables anchoring of contained elements relative to the container's dimensions. * If the container is resized, all anchored items are automatically rerendered according to their * {@link #anchor} rules.

*

This class is intended to be extended or created via the layout:'anchor' {@link Ext.Container#layout} * config, and should generally not need to be created directly via the new keyword.

*

AnchorLayout does not have any direct config options (other than inherited ones). By default, * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the * container using the AnchorLayout can supply an anchoring-specific config property of anchorSize. * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring * logic if necessary. For example:

*

var viewport = new Ext.Viewport({
    layout:'anchor',
    anchorSize: {width:800, height:600},
    items:[{
        title:'Item 1',
        html:'Content 1',
        width:800,
        anchor:'right 20%'
    },{
        title:'Item 2',
        html:'Content 2',
        width:300,
        anchor:'50% 30%'
    },{
        title:'Item 3',
        html:'Content 3',
        width:600,
        anchor:'-100 50%'
    }]
});
 * 
*/ Ext.layout.AnchorLayout = Ext.extend(Ext.layout.ContainerLayout, {
/** * @cfg {String} anchor *

This configuation option is to be applied to child items of a container managed by * this layout (ie. configured with layout:'anchor').


* *

This value is what tells the layout how an item should be anchored to the container. items * added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). * The following types of anchor values are supported:

*/ // private monitorResize : true, type : 'anchor',
/** * @cfg {String} defaultAnchor * * default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'. * */ defaultAnchor : '100%', parseAnchorRE : /^(r|right|b|bottom)$/i, getLayoutTargetSize : function() { var target = this.container.getLayoutTarget(); if (!target) { return {}; } // Style Sized (scrollbars not included) return target.getStyleSize(); }, // private onLayout : function(ct, target){ Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target); var size = this.getLayoutTargetSize(); var w = size.width, h = size.height; if(w < 20 && h < 20){ return; } // find the container anchoring size 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; } var cs = this.getRenderedItems(ct), len = cs.length, i, c, a, cw, ch, el, vs, boxes = []; for(i = 0; i < len; i++){ c = cs[i]; el = c.getPositionEl(); // If a child container item has no anchor and no specific width, set the child to the default anchor size if (!c.anchor && c.items && !Ext.isNumber(c.width) && !(Ext.isIE6 && Ext.isStrict)){ c.anchor = this.defaultAnchor; } if(c.anchor){ a = c.anchorSpec; if(!a){ // cache all anchor values 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) - el.getMargins('lr'), c) : undefined; ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h) - el.getMargins('tb'), c) : undefined; if(cw || ch){ boxes.push({ comp: c, width: cw || undefined, height: ch || undefined }); } } } for (i = 0, len = boxes.length; i < len; i++) { c = boxes[i]; c.comp.setSize(c.width, c.height); } }, // private parseAnchor : function(a, start, cstart){ if(a && a != 'none'){ var last; // standard anchor if(this.parseAnchorRE.test(a)){ var diff = cstart - start; return function(v){ if(v !== last){ last = v; return v - diff; } } // percentage }else if(a.indexOf('%') != -1){ var ratio = parseFloat(a.replace('%', ''))*.01; return function(v){ if(v !== last){ last = v; return Math.floor(v*ratio); } } // simple offset adjustment }else{ a = parseInt(a, 10); if(!isNaN(a)){ return function(v){ if(v !== last){ last = v; return v + a; } } } } } return false; }, // private adjustWidthAnchor : function(value, comp){ return value; }, // private adjustHeightAnchor : function(value, comp){ return value; }
/** * @property activeItem * @hide */ }); Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout;