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