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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/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  *
  22  * This is a layout that inherits the anchoring of {@link Ext.layout.container.Anchor} and adds the
  23  * ability for x/y positioning using the standard x and y component config options.
  24  *
  25  * This class is intended to be extended or created via the {@link Ext.container.Container#layout layout}
  26  * configuration property.  See {@link Ext.container.Container#layout} for additional details.
  27  *
  28  *     @example
  29  *     Ext.create('Ext.form.Panel', {
  30  *         title: 'Absolute Layout',
  31  *         width: 300,
  32  *         height: 275,
  33  *         layout:'absolute',
  34  *         layoutConfig: {
  35  *             // layout-specific configs go here
  36  *             //itemCls: 'x-abs-layout-item',
  37  *         },
  38  *         url:'save-form.php',
  39  *         defaultType: 'textfield',
  40  *         items: [{
  41  *             x: 10,
  42  *             y: 10,
  43  *             xtype:'label',
  44  *             text: 'Send To:'
  45  *         },{
  46  *             x: 80,
  47  *             y: 10,
  48  *             name: 'to',
  49  *             anchor:'90%'  // anchor width by percentage
  50  *         },{
  51  *             x: 10,
  52  *             y: 40,
  53  *             xtype:'label',
  54  *             text: 'Subject:'
  55  *         },{
  56  *             x: 80,
  57  *             y: 40,
  58  *             name: 'subject',
  59  *             anchor: '90%'  // anchor width by percentage
  60  *         },{
  61  *             x:0,
  62  *             y: 80,
  63  *             xtype: 'textareafield',
  64  *             name: 'msg',
  65  *             anchor: '100% 100%'  // anchor width and height
  66  *         }],
  67  *         renderTo: Ext.getBody()
  68  *     });
  69  */
  70 Ext.define('Ext.layout.container.Absolute', {
  71
  72     /* Begin Definitions */
  73
  74     alias: 'layout.absolute',
  75     extend: 'Ext.layout.container.Anchor',
  76     alternateClassName: 'Ext.layout.AbsoluteLayout',
  77
  78     /* End Definitions */
  79
  80     itemCls: Ext.baseCSSPrefix + 'abs-layout-item',
  81
  82     type: 'absolute',
  83
  84     onLayout: function() {
  85         var me = this,
  86             target = me.getTarget(),
  87             targetIsBody = target.dom === document.body;
  88
  89         // Do not set position: relative; when the absolute layout target is the body
  90         if (!targetIsBody) {
  91             target.position();
  92         }
  93         me.paddingLeft = target.getPadding('l');
  94         me.paddingTop = target.getPadding('t');
  95         me.callParent(arguments);
  96     },
  97
  98     // private
  99     adjustWidthAnchor: function(value, comp) {
 100         //return value ? value - comp.getPosition(true)[0] + this.paddingLeft: value;
 101         return value ? value - comp.getPosition(true)[0] : value;
 102     },
 103
 104     // private
 105     adjustHeightAnchor: function(value, comp) {
 106         //return value ? value - comp.getPosition(true)[1] + this.paddingTop: value;
 107         return value ? value - comp.getPosition(true)[1] : value;
 108     }
 109 });</pre>
 110 </body>
 111 </html>