/ext-4.1.0_b3/src/layout/container/Absolute.js
JavaScript | 129 lines | 47 code | 19 blank | 63 comment | 5 complexity | 6c23af75974ebb1254289daca95f2453 MD5 | raw file
1/**
2 * This is a layout that inherits the anchoring of {@link Ext.layout.container.Anchor} and adds the
3 * ability for x/y positioning using the standard x and y component config options.
4 *
5 * This class is intended to be extended or created via the {@link Ext.container.Container#layout layout}
6 * configuration property. See {@link Ext.container.Container#layout} for additional details.
7 *
8 * @example
9 * Ext.create('Ext.form.Panel', {
10 * title: 'Absolute Layout',
11 * width: 300,
12 * height: 275,
13 * layout: {
14 * type: 'absolute',
15 * // layout-specific configs go here
16 * //itemCls: 'x-abs-layout-item',
17 * },
18 * url:'save-form.php',
19 * defaultType: 'textfield',
20 * items: [{
21 * x: 10,
22 * y: 10,
23 * xtype:'label',
24 * text: 'Send To:'
25 * },{
26 * x: 80,
27 * y: 10,
28 * name: 'to',
29 * anchor:'90%' // anchor width by percentage
30 * },{
31 * x: 10,
32 * y: 40,
33 * xtype:'label',
34 * text: 'Subject:'
35 * },{
36 * x: 80,
37 * y: 40,
38 * name: 'subject',
39 * anchor: '90%' // anchor width by percentage
40 * },{
41 * x:0,
42 * y: 80,
43 * xtype: 'textareafield',
44 * name: 'msg',
45 * anchor: '100% 100%' // anchor width and height
46 * }],
47 * renderTo: Ext.getBody()
48 * });
49 */
50Ext.define('Ext.layout.container.Absolute', {
51
52 /* Begin Definitions */
53
54 alias: 'layout.absolute',
55 extend: 'Ext.layout.container.Anchor',
56 alternateClassName: 'Ext.layout.AbsoluteLayout',
57
58 /* End Definitions */
59
60 targetCls: Ext.baseCSSPrefix + 'abs-layout-ct',
61 itemCls: Ext.baseCSSPrefix + 'abs-layout-item',
62
63 /**
64 * @cfg {Boolean} ignoreOnContentChange
65 * True indicates that changes to one item in this layout do not effect the layout in
66 * general. This may need to be set to false if {@link Ext.AbstractComponent#autoScroll}
67 * is enabled for the container.
68 */
69 ignoreOnContentChange: true,
70
71 type: 'absolute',
72
73 // private
74 adjustWidthAnchor: function(value, childContext) {
75 var padding = this.targetPadding,
76 x = childContext.getStyle('left');
77
78 return value - x + padding.left;
79 },
80
81 // private
82 adjustHeightAnchor: function(value, childContext) {
83 var padding = this.targetPadding,
84 y = childContext.getStyle('top');
85
86 return value - y + padding.top;
87 },
88
89 isItemLayoutRoot: function (item) {
90 return this.ignoreOnContentChange || this.callParent(arguments);
91 },
92
93 isItemShrinkWrap: function (item) {
94 return true;
95 },
96
97 // private
98 isValidParent : function(item, target, position) {
99 // Note: Absolute layout does not care about order within the innerCt element because it's an absolutely positioning layout
100 // We only care whether the item is a direct child of the innerCt element.
101 var itemEl = item.el ? item.el.dom : Ext.getDom(item);
102 return (itemEl && itemEl.parentNode === this.getRenderTarget().dom) || false;
103 },
104
105 beginLayout: function (ownerContext) {
106 var me = this,
107 target = me.getTarget();
108
109 me.callParent(arguments);
110
111 // Do not set position: relative; when the absolute layout target is the body
112 if (target.dom !== document.body) {
113 target.position();
114 }
115
116 me.targetPadding = ownerContext.targetContext.getPaddingInfo();
117 },
118
119 isItemBoxParent: function (itemContext) {
120 return true;
121 },
122
123 onContentChange: function () {
124 if (this.ignoreOnContentChange) {
125 return false;
126 }
127 return this.callParent(arguments);
128 }
129});