/ext-4.1.0_b3/src/layout/container/Absolute.js

  1/**
  2 * This is a layout that inherits the anchoring of {@link Ext.layout.container.Anchor} and adds the
  3 * ability for x/y positioning using the standard x and y component config options.
  4 *
  5 * This class is intended to be extended or created via the {@link Ext.container.Container#layout layout}
  6 * configuration property.  See {@link Ext.container.Container#layout} for additional details.
  7 *
  8 *     @example
  9 *     Ext.create('Ext.form.Panel', {
 10 *         title: 'Absolute Layout',
 11 *         width: 300,
 12 *         height: 275,
 13 *         layout: {
 14 *             type: 'absolute',
 15 *             // layout-specific configs go here
 16 *             //itemCls: 'x-abs-layout-item',
 17 *         },
 18 *         url:'save-form.php',
 19 *         defaultType: 'textfield',
 20 *         items: [{
 21 *             x: 10,
 22 *             y: 10,
 23 *             xtype:'label',
 24 *             text: 'Send To:'
 25 *         },{
 26 *             x: 80,
 27 *             y: 10,
 28 *             name: 'to',
 29 *             anchor:'90%'  // anchor width by percentage
 30 *         },{
 31 *             x: 10,
 32 *             y: 40,
 33 *             xtype:'label',
 34 *             text: 'Subject:'
 35 *         },{
 36 *             x: 80,
 37 *             y: 40,
 38 *             name: 'subject',
 39 *             anchor: '90%'  // anchor width by percentage
 40 *         },{
 41 *             x:0,
 42 *             y: 80,
 43 *             xtype: 'textareafield',
 44 *             name: 'msg',
 45 *             anchor: '100% 100%'  // anchor width and height
 46 *         }],
 47 *         renderTo: Ext.getBody()
 48 *     });
 49 */
 50Ext.define('Ext.layout.container.Absolute', {
 51
 52    /* Begin Definitions */
 53
 54    alias: 'layout.absolute',
 55    extend: 'Ext.layout.container.Anchor',
 56    alternateClassName: 'Ext.layout.AbsoluteLayout',
 57
 58    /* End Definitions */
 59
 60    targetCls: Ext.baseCSSPrefix + 'abs-layout-ct',
 61    itemCls: Ext.baseCSSPrefix + 'abs-layout-item',
 62
 63    /**
 64     * @cfg {Boolean} ignoreOnContentChange
 65     * True indicates that changes to one item in this layout do not effect the layout in
 66     * general. This may need to be set to false if {@link Ext.AbstractComponent#autoScroll}
 67     * is enabled for the container.
 68     */
 69    ignoreOnContentChange: true,
 70
 71    type: 'absolute',
 72
 73    // private
 74    adjustWidthAnchor: function(value, childContext) {
 75        var padding = this.targetPadding,
 76            x = childContext.getStyle('left');
 77
 78        return value - x + padding.left;
 79    },
 80
 81    // private
 82    adjustHeightAnchor: function(value, childContext) {
 83        var padding = this.targetPadding,
 84            y = childContext.getStyle('top');
 85
 86        return value - y + padding.top;
 87    },
 88
 89    isItemLayoutRoot: function (item) {
 90        return this.ignoreOnContentChange || this.callParent(arguments);
 91    },
 92
 93    isItemShrinkWrap: function (item) {
 94        return true;
 95    },
 96
 97    // private
 98    isValidParent : function(item, target, position) {
 99        // Note: Absolute layout does not care about order within the innerCt element because it's an absolutely positioning layout
100        // We only care whether the item is a direct child of the innerCt element.
101        var itemEl = item.el ? item.el.dom : Ext.getDom(item);
102        return (itemEl && itemEl.parentNode === this.getRenderTarget().dom) || false;
103    },
104
105    beginLayout: function (ownerContext) {
106        var me = this,
107            target = me.getTarget();
108
109        me.callParent(arguments);
110
111        // Do not set position: relative; when the absolute layout target is the body
112        if (target.dom !== document.body) {
113            target.position();
114        }
115
116        me.targetPadding = ownerContext.targetContext.getPaddingInfo();
117    },
118
119    isItemBoxParent: function (itemContext) {
120        return true;
121    },
122
123    onContentChange: function () {
124        if (this.ignoreOnContentChange) {
125            return false;
126        }
127        return this.callParent(arguments);
128    }
129});