X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/layout/container/Anchor.js?ds=sidebyside diff --git a/src/layout/container/Anchor.js b/src/layout/container/Anchor.js new file mode 100644 index 00000000..019107bb --- /dev/null +++ b/src/layout/container/Anchor.js @@ -0,0 +1,258 @@ +/** + * @class Ext.layout.container.Anchor + * @extends Ext.layout.container.Container + *

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.layout.container.AbstractContainer#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. + * {@img Ext.layout.container.Anchor/Ext.layout.container.Anchor.png Ext.layout.container.Anchor container layout} + * For example: + Ext.create('Ext.Panel', { + width: 500, + height: 400, + title: "AnchorLayout Panel", + layout: 'anchor', + renderTo: Ext.getBody(), + items: [{ + xtype: 'panel', + title: '75% Width and 20% Height', + anchor: '75% 20%' + },{ + xtype: 'panel', + title: 'Offset -300 Width & -200 Height', + anchor: '-300 -200' + },{ + xtype: 'panel', + title: 'Mixed Offset and Percent', + anchor: '-250 20%' + }] + }); + */ + +Ext.define('Ext.layout.container.Anchor', { + + /* Begin Definitions */ + + alias: 'layout.anchor', + extend: 'Ext.layout.container.Container', + alternateClassName: 'Ext.layout.AnchorLayout', + + /* End Definitions */ + + /** + * @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:

+ */ + + 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, + + // private + onLayout: function() { + this.callParent(arguments); + + var me = this, + size = me.getLayoutTargetSize(), + owner = me.owner, + target = me.getTarget(), + ownerWidth = size.width, + ownerHeight = size.height, + overflow = target.getStyle('overflow'), + components = me.getVisibleItems(owner), + len = components.length, + boxes = [], + box, newTargetSize, anchorWidth, anchorHeight, component, anchorSpec, calcWidth, calcHeight, + anchorsArray, anchor, i, el; + + if (ownerWidth < 20 && ownerHeight < 20) { + return; + } + + // Anchor layout uses natural HTML flow to arrange the child items. + // To ensure that all browsers (I'm looking at you IE!) add the bottom margin of the last child to the + // containing element height, we create a zero-sized element with style clear:both to force a "new line" + if (!me.clearEl) { + me.clearEl = target.createChild({ + cls: Ext.baseCSSPrefix + 'clear', + role: 'presentation' + }); + } + + // find the container anchoring size + if (owner.anchorSize) { + if (typeof owner.anchorSize == 'number') { + anchorWidth = owner.anchorSize; + } + else { + anchorWidth = owner.anchorSize.width; + anchorHeight = owner.anchorSize.height; + } + } + else { + anchorWidth = owner.initialConfig.width; + anchorHeight = owner.initialConfig.height; + } + + // Work around WebKit RightMargin bug. We're going to inline-block all the children only ONCE and remove it when we're done + if (!Ext.supports.RightMargin) { + target.addCls(Ext.baseCSSPrefix + 'inline-children'); + } + + for (i = 0; i < len; i++) { + component = components[i]; + el = component.el; + anchor = component.anchor; + + if (!component.anchor && component.items && !Ext.isNumber(component.width) && !(Ext.isIE6 && Ext.isStrict)) { + component.anchor = anchor = me.defaultAnchor; + } + + if (anchor) { + anchorSpec = component.anchorSpec; + // cache all anchor values + if (!anchorSpec) { + anchorsArray = anchor.split(' '); + component.anchorSpec = anchorSpec = { + right: me.parseAnchor(anchorsArray[0], component.initialConfig.width, anchorWidth), + bottom: me.parseAnchor(anchorsArray[1], component.initialConfig.height, anchorHeight) + }; + } + calcWidth = anchorSpec.right ? me.adjustWidthAnchor(anchorSpec.right(ownerWidth) - el.getMargin('lr'), component) : undefined; + calcHeight = anchorSpec.bottom ? me.adjustHeightAnchor(anchorSpec.bottom(ownerHeight) - el.getMargin('tb'), component) : undefined; + + boxes.push({ + component: component, + anchor: true, + width: calcWidth || undefined, + height: calcHeight || undefined + }); + } else { + boxes.push({ + component: component, + anchor: false + }); + } + } + + // Work around WebKit RightMargin bug. We're going to inline-block all the children only ONCE and remove it when we're done + if (!Ext.supports.RightMargin) { + target.removeCls(Ext.baseCSSPrefix + 'inline-children'); + } + + for (i = 0; i < len; i++) { + box = boxes[i]; + me.setItemSize(box.component, box.width, box.height); + } + + if (overflow && overflow != 'hidden' && !me.adjustmentPass) { + newTargetSize = me.getLayoutTargetSize(); + if (newTargetSize.width != size.width || newTargetSize.height != size.height) { + me.adjustmentPass = true; + me.onLayout(); + } + } + + delete me.adjustmentPass; + }, + + // private + parseAnchor: function(a, start, cstart) { + if (a && a != 'none') { + var ratio; + // standard anchor + if (this.parseAnchorRE.test(a)) { + var diff = cstart - start; + return function(v) { + return v - diff; + }; + } + // percentage + else if (a.indexOf('%') != -1) { + ratio = parseFloat(a.replace('%', '')) * 0.01; + return function(v) { + return Math.floor(v * ratio); + }; + } + // simple offset adjustment + else { + a = parseInt(a, 10); + if (!isNaN(a)) { + return function(v) { + return v + a; + }; + } + } + } + return null; + }, + + // private + adjustWidthAnchor: function(value, comp) { + return value; + }, + + // private + adjustHeightAnchor: function(value, comp) { + return value; + } + +}); \ No newline at end of file