<!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>