docs/source/AbsoluteLayout.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js"><div id="cls-Ext.layout.AbsoluteLayout"></div>/**
  10  * @class Ext.layout.AbsoluteLayout
  11  * @extends Ext.layout.AnchorLayout
  12  * <p>This is a layout that inherits the anchoring of <b>{@link Ext.layout.AnchorLayout}</b> and adds the
  13  * ability for x/y positioning using the standard x and y component config options.</p>
  14  * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
  15  * configuration property.  See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
  16  * <p>Example usage:</p>
  17  * <pre><code>
  18 var form = new Ext.form.FormPanel({
  19     title: 'Absolute Layout',
  20     layout:'absolute',
  21     layoutConfig: {
  22         // layout-specific configs go here
  23         extraCls: 'x-abs-layout-item',
  24     },
  25     baseCls: 'x-plain',
  26     url:'save-form.php',
  27     defaultType: 'textfield',
  28     items: [{
  29         x: 0,
  30         y: 5,
  31         xtype:'label',
  32         text: 'Send To:'
  33     },{
  34         x: 60,
  35         y: 0,
  36         name: 'to',
  37         anchor:'100%'  // anchor width by percentage
  38     },{
  39         x: 0,
  40         y: 35,
  41         xtype:'label',
  42         text: 'Subject:'
  43     },{
  44         x: 60,
  45         y: 30,
  46         name: 'subject',
  47         anchor: '100%'  // anchor width by percentage
  48     },{
  49         x:0,
  50         y: 60,
  51         xtype: 'textarea',
  52         name: 'msg',
  53         anchor: '100% 100%'  // anchor width and height
  54     }]
  55 });
  56 </code></pre>
  57  */
  58 Ext.layout.AbsoluteLayout = Ext.extend(Ext.layout.AnchorLayout, {
  59
  60     extraCls: 'x-abs-layout-item',
  61
  62     type: 'anchor',
  63
  64     onLayout : function(ct, target){
  65         target.position();
  66         this.paddingLeft = target.getPadding('l');
  67         this.paddingTop = target.getPadding('t');
  68         Ext.layout.AbsoluteLayout.superclass.onLayout.call(this, ct, target);
  69     },
  70
  71     // private
  72     adjustWidthAnchor : function(value, comp){
  73         return value ? value - comp.getPosition(true)[0] + this.paddingLeft : value;
  74     },
  75
  76     // private
  77     adjustHeightAnchor : function(value, comp){
  78         return  value ? value - comp.getPosition(true)[1] + this.paddingTop : value;
  79     }
  80     <div id="prop-Ext.layout.AbsoluteLayout-activeItem"></div>/**
  81      * @property activeItem
  82      * @hide
  83      */
  84 });
  85 Ext.Container.LAYOUTS['absolute'] = Ext.layout.AbsoluteLayout;
  86 </pre>    \r
  87 </body>\r
  88 </html>