Absolute.html
4.16 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-layout-container-Absolute'>/**
</span> * 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',
<span id='Ext-layout-container-Absolute-cfg-ignoreOnContentChange'> /**
</span> * @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);
}
});
</pre>
</body>
</html>