src/widgets/layout/AbsoluteLayout.js

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