src/widgets/layout/AbsoluteLayout.js

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