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