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