CellEditor.html
7.33 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!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-grid-CellEditor'>/**
</span> * Internal utility class that provides default configuration for cell editing.
* @private
*/
Ext.define('Ext.grid.CellEditor', {
extend: 'Ext.Editor',
constructor: function(config) {
config = Ext.apply({}, config);
if (config.field) {
config.field.monitorTab = false;
}
this.callParent([config]);
},
<span id='Ext-grid-CellEditor-method-onShow'> /**
</span> * @private
* Hide the grid cell text when editor is shown.
*
* There are 2 reasons this needs to happen:
*
* 1. checkbox editor does not take up enough space to hide the underlying text.
*
* 2. When columnLines are turned off in browsers that don't support text-overflow:
* ellipsis (firefox 6 and below and IE quirks), the text extends to the last pixel
* in the cell, however the right border of the cell editor is always positioned 1px
* offset from the edge of the cell (to give it the appearance of being "inside" the
* cell. This results in 1px of the underlying cell text being visible to the right
* of the cell editor if the text is not hidden.
*
* We can't just hide the entire cell, because then treecolumn's icons would be hidden
* as well. We also can't just set "color: transparent" to hide the text because it is
* not supported by IE8 and below. The only remaining solution is to remove the text
* from the text node and then add it back when the editor is hidden.
*/
onShow: function() {
var me = this,
innerCell = me.boundEl.first(),
lastChild,
textNode;
if (innerCell) {
lastChild = innerCell.dom.lastChild;
if(lastChild && lastChild.nodeType === 3) {
// if the cell has a text node, save a reference to it
textNode = me.cellTextNode = innerCell.dom.lastChild;
// save the cell text so we can add it back when we're done editing
me.cellTextValue = textNode.nodeValue;
// The text node has to have at least one character in it, or the cell borders
// in IE quirks mode will not show correctly, so let's use a non-breaking space.
textNode.nodeValue = '\u00a0';
}
}
me.callParent(arguments);
},
<span id='Ext-grid-CellEditor-method-onHide'> /**
</span> * @private
* Show the grid cell text when the editor is hidden by adding the text back to the text node
*/
onHide: function() {
var me = this,
innerCell = me.boundEl.first();
if (innerCell && me.cellTextNode) {
me.cellTextNode.nodeValue = me.cellTextValue;
delete me.cellTextNode;
delete me.cellTextValue;
}
me.callParent(arguments);
},
<span id='Ext-grid-CellEditor-method-afterRender'> /**
</span> * @private
* Fix checkbox blur when it is clicked.
*/
afterRender: function() {
var me = this,
field = me.field;
me.callParent(arguments);
if (field.isXType('checkboxfield')) {
field.mon(field.inputEl, {
mousedown: me.onCheckBoxMouseDown,
click: me.onCheckBoxClick,
scope: me
});
}
},
<span id='Ext-grid-CellEditor-method-onCheckBoxMouseDown'> /**
</span> * @private
* Because when checkbox is clicked it loses focus completeEdit is bypassed.
*/
onCheckBoxMouseDown: function() {
this.completeEdit = Ext.emptyFn;
},
<span id='Ext-grid-CellEditor-method-onCheckBoxClick'> /**
</span> * @private
* Restore checkbox focus and completeEdit method.
*/
onCheckBoxClick: function() {
delete this.completeEdit;
this.field.focus(false, 10);
},
<span id='Ext-grid-CellEditor-method-realign'> /**
</span> * @private
* Realigns the Editor to the grid cell, or to the text node in the grid inner cell
* if the inner cell contains multiple child nodes.
*/
realign: function(autoSize) {
var me = this,
boundEl = me.boundEl,
innerCell = boundEl.first(),
children = innerCell.dom.childNodes,
childCount = children.length,
offsets = Ext.Array.clone(me.offsets),
inputEl = me.field.inputEl,
lastChild, leftBound, rightBound, width;
// If the inner cell has more than one child, or the first child node is not a text node,
// let's assume this cell contains additional elements before the text node.
// This is the case for tree cells, but could also be used to accomodate grid cells that
// have a custom renderer that render, say, an icon followed by some text for example
// For now however, this support will only be used for trees.
if(me.isForTree && (childCount > 1 || (childCount === 1 && children[0].nodeType !== 3))) {
// get the inner cell's last child
lastChild = innerCell.last();
// calculate the left bound of the text node
leftBound = lastChild.getOffsetsTo(innerCell)[0] + lastChild.getWidth();
// calculate the right bound of the text node (this is assumed to be the right edge of
// the inner cell, since we are assuming the text node is always the last node in the
// inner cell)
rightBound = innerCell.getWidth();
// difference between right and left bound is the text node's allowed "width",
// this will be used as the width for the editor.
width = rightBound - leftBound;
// adjust width for column lines - this ensures the editor will be the same width
// regardless of columLines config
if(!me.editingPlugin.grid.columnLines) {
width --;
}
// set the editor's x offset to the left bound position
offsets[0] += leftBound;
me.addCls(Ext.baseCSSPrefix + 'grid-editor-on-text-node');
} else {
width = boundEl.getWidth() - 1;
}
if (autoSize === true) {
me.field.setWidth(width);
}
me.alignTo(boundEl, me.alignment, offsets);
},
onEditorTab: function(e){
var field = this.field;
if (field.onEditorTab) {
field.onEditorTab(e);
}
},
alignment: "tl-tl",
hideEl : false,
cls: Ext.baseCSSPrefix + "small-editor " + Ext.baseCSSPrefix + "grid-editor",
shim: false,
shadow: false
});</pre>
</body>
</html>