docs/source/Absolute.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-layout.container.Absolute'>/**
   2 </span> * @class Ext.layout.container.Absolute
   3  * @extends Ext.layout.container.Anchor
   4  * &lt;p&gt;This is a layout that inherits the anchoring of &lt;b&gt;{@link Ext.layout.container.Anchor}&lt;/b&gt; and adds the
   5  * ability for x/y positioning using the standard x and y component config options.&lt;/p&gt;
   6  * &lt;p&gt;This class is intended to be extended or created via the &lt;tt&gt;&lt;b&gt;{@link Ext.container.Container#layout layout}&lt;/b&gt;&lt;/tt&gt;
   7  * configuration property.  See &lt;tt&gt;&lt;b&gt;{@link Ext.container.Container#layout}&lt;/b&gt;&lt;/tt&gt; for additional details.&lt;/p&gt;
   8  * {@img Ext.layout.container.Absolute/Ext.layout.container.Absolute.png Ext.layout.container.Absolute container layout}
   9  * &lt;p&gt;Example usage:&lt;/p&gt;
  10  * &lt;pre&gt;&lt;code&gt;
  11 Ext.create('Ext.form.Panel', {
  12     title: 'Absolute Layout',
  13     width: 300,
  14     height: 275,
  15     layout:'absolute',
  16     layoutConfig: {
  17         // layout-specific configs go here
  18         //itemCls: 'x-abs-layout-item',
  19     },
  20     url:'save-form.php',
  21     defaultType: 'textfield',
  22     items: [{
  23         x: 10,
  24         y: 10,
  25         xtype:'label',
  26         text: 'Send To:'
  27     },{
  28         x: 80,
  29         y: 10,
  30         name: 'to',
  31         anchor:'90%'  // anchor width by percentage
  32     },{
  33         x: 10,
  34         y: 40,
  35         xtype:'label',
  36         text: 'Subject:'
  37     },{
  38         x: 80,
  39         y: 40,
  40         name: 'subject',
  41         anchor: '90%'  // anchor width by percentage
  42     },{
  43         x:0,
  44         y: 80,
  45         xtype: 'textareafield',
  46         name: 'msg',
  47         anchor: '100% 100%'  // anchor width and height
  48     }],
  49     renderTo: Ext.getBody()
  50 });
  51 &lt;/code&gt;&lt;/pre&gt;
  52  */
  53
  54 Ext.define('Ext.layout.container.Absolute', {
  55
  56     /* Begin Definitions */
  57
  58     alias: 'layout.absolute',
  59     extend: 'Ext.layout.container.Anchor',
  60     requires: ['Ext.chart.axis.Axis', 'Ext.fx.Anim'],
  61     alternateClassName: 'Ext.layout.AbsoluteLayout',
  62
  63     /* End Definitions */
  64
  65     itemCls: Ext.baseCSSPrefix + 'abs-layout-item',
  66
  67     type: 'absolute',
  68
  69     onLayout: function() {
  70         var me = this,
  71             target = me.getTarget(),
  72             targetIsBody = target.dom === document.body;
  73
  74         // Do not set position: relative; when the absolute layout target is the body
  75         if (!targetIsBody) {
  76             target.position();
  77         }
  78         me.paddingLeft = target.getPadding('l');
  79         me.paddingTop = target.getPadding('t');
  80         me.callParent(arguments);
  81     },
  82
  83     // private
  84     adjustWidthAnchor: function(value, comp) {
  85         //return value ? value - comp.getPosition(true)[0] + this.paddingLeft: value;
  86         return value ? value - comp.getPosition(true)[0] : value;
  87     },
  88
  89     // private
  90     adjustHeightAnchor: function(value, comp) {
  91         //return value ? value - comp.getPosition(true)[1] + this.paddingTop: value;
  92         return value ? value - comp.getPosition(true)[1] : value;
  93     }
  94 });</pre></pre></body></html>