docs/source/Absolute.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-layout-container-Absolute'>/**
  19 </span> * @class Ext.layout.container.Absolute
  20  * @extends Ext.layout.container.Anchor
  21  * &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
  22  * ability for x/y positioning using the standard x and y component config options.&lt;/p&gt;
  23  * &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;
  24  * 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;
  25  * {@img Ext.layout.container.Absolute/Ext.layout.container.Absolute.png Ext.layout.container.Absolute container layout}
  26  * &lt;p&gt;Example usage:&lt;/p&gt;
  27  * &lt;pre&gt;&lt;code&gt;
  28 Ext.create('Ext.form.Panel', {
  29     title: 'Absolute Layout',
  30     width: 300,
  31     height: 275,
  32     layout:'absolute',
  33     layoutConfig: {
  34         // layout-specific configs go here
  35         //itemCls: 'x-abs-layout-item',
  36     },
  37     url:'save-form.php',
  38     defaultType: 'textfield',
  39     items: [{
  40         x: 10,
  41         y: 10,
  42         xtype:'label',
  43         text: 'Send To:'
  44     },{
  45         x: 80,
  46         y: 10,
  47         name: 'to',
  48         anchor:'90%'  // anchor width by percentage
  49     },{
  50         x: 10,
  51         y: 40,
  52         xtype:'label',
  53         text: 'Subject:'
  54     },{
  55         x: 80,
  56         y: 40,
  57         name: 'subject',
  58         anchor: '90%'  // anchor width by percentage
  59     },{
  60         x:0,
  61         y: 80,
  62         xtype: 'textareafield',
  63         name: 'msg',
  64         anchor: '100% 100%'  // anchor width and height
  65     }],
  66     renderTo: Ext.getBody()
  67 });
  68 &lt;/code&gt;&lt;/pre&gt;
  69  */
  70
  71 Ext.define('Ext.layout.container.Absolute', {
  72
  73     /* Begin Definitions */
  74
  75     alias: 'layout.absolute',
  76     extend: 'Ext.layout.container.Anchor',
  77     requires: ['Ext.chart.axis.Axis', 'Ext.fx.Anim'],
  78     alternateClassName: 'Ext.layout.AbsoluteLayout',
  79
  80     /* End Definitions */
  81
  82     itemCls: Ext.baseCSSPrefix + 'abs-layout-item',
  83
  84     type: 'absolute',
  85
  86     onLayout: function() {
  87         var me = this,
  88             target = me.getTarget(),
  89             targetIsBody = target.dom === document.body;
  90
  91         // Do not set position: relative; when the absolute layout target is the body
  92         if (!targetIsBody) {
  93             target.position();
  94         }
  95         me.paddingLeft = target.getPadding('l');
  96         me.paddingTop = target.getPadding('t');
  97         me.callParent(arguments);
  98     },
  99
 100     // private
 101     adjustWidthAnchor: function(value, comp) {
 102         //return value ? value - comp.getPosition(true)[0] + this.paddingLeft: value;
 103         return value ? value - comp.getPosition(true)[0] : value;
 104     },
 105
 106     // private
 107     adjustHeightAnchor: function(value, comp) {
 108         //return value ? value - comp.getPosition(true)[1] + this.paddingTop: value;
 109         return value ? value - comp.getPosition(true)[1] : value;
 110     }
 111 });</pre>
 112 </body>
 113 </html>