CellEditor.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-grid-CellEditor'>/**
  19. </span> * Internal utility class that provides default configuration for cell editing.
  20. * @private
  21. */
  22. Ext.define('Ext.grid.CellEditor', {
  23. extend: 'Ext.Editor',
  24. constructor: function(config) {
  25. config = Ext.apply({}, config);
  26. if (config.field) {
  27. config.field.monitorTab = false;
  28. }
  29. this.callParent([config]);
  30. },
  31. <span id='Ext-grid-CellEditor-method-onShow'> /**
  32. </span> * @private
  33. * Hide the grid cell text when editor is shown.
  34. *
  35. * There are 2 reasons this needs to happen:
  36. *
  37. * 1. checkbox editor does not take up enough space to hide the underlying text.
  38. *
  39. * 2. When columnLines are turned off in browsers that don't support text-overflow:
  40. * ellipsis (firefox 6 and below and IE quirks), the text extends to the last pixel
  41. * in the cell, however the right border of the cell editor is always positioned 1px
  42. * offset from the edge of the cell (to give it the appearance of being &quot;inside&quot; the
  43. * cell. This results in 1px of the underlying cell text being visible to the right
  44. * of the cell editor if the text is not hidden.
  45. *
  46. * We can't just hide the entire cell, because then treecolumn's icons would be hidden
  47. * as well. We also can't just set &quot;color: transparent&quot; to hide the text because it is
  48. * not supported by IE8 and below. The only remaining solution is to remove the text
  49. * from the text node and then add it back when the editor is hidden.
  50. */
  51. onShow: function() {
  52. var me = this,
  53. innerCell = me.boundEl.first(),
  54. lastChild,
  55. textNode;
  56. if (innerCell) {
  57. lastChild = innerCell.dom.lastChild;
  58. if(lastChild &amp;&amp; lastChild.nodeType === 3) {
  59. // if the cell has a text node, save a reference to it
  60. textNode = me.cellTextNode = innerCell.dom.lastChild;
  61. // save the cell text so we can add it back when we're done editing
  62. me.cellTextValue = textNode.nodeValue;
  63. // The text node has to have at least one character in it, or the cell borders
  64. // in IE quirks mode will not show correctly, so let's use a non-breaking space.
  65. textNode.nodeValue = '\u00a0';
  66. }
  67. }
  68. me.callParent(arguments);
  69. },
  70. <span id='Ext-grid-CellEditor-method-onHide'> /**
  71. </span> * @private
  72. * Show the grid cell text when the editor is hidden by adding the text back to the text node
  73. */
  74. onHide: function() {
  75. var me = this,
  76. innerCell = me.boundEl.first();
  77. if (innerCell &amp;&amp; me.cellTextNode) {
  78. me.cellTextNode.nodeValue = me.cellTextValue;
  79. delete me.cellTextNode;
  80. delete me.cellTextValue;
  81. }
  82. me.callParent(arguments);
  83. },
  84. <span id='Ext-grid-CellEditor-method-afterRender'> /**
  85. </span> * @private
  86. * Fix checkbox blur when it is clicked.
  87. */
  88. afterRender: function() {
  89. var me = this,
  90. field = me.field;
  91. me.callParent(arguments);
  92. if (field.isXType('checkboxfield')) {
  93. field.mon(field.inputEl, {
  94. mousedown: me.onCheckBoxMouseDown,
  95. click: me.onCheckBoxClick,
  96. scope: me
  97. });
  98. }
  99. },
  100. <span id='Ext-grid-CellEditor-method-onCheckBoxMouseDown'> /**
  101. </span> * @private
  102. * Because when checkbox is clicked it loses focus completeEdit is bypassed.
  103. */
  104. onCheckBoxMouseDown: function() {
  105. this.completeEdit = Ext.emptyFn;
  106. },
  107. <span id='Ext-grid-CellEditor-method-onCheckBoxClick'> /**
  108. </span> * @private
  109. * Restore checkbox focus and completeEdit method.
  110. */
  111. onCheckBoxClick: function() {
  112. delete this.completeEdit;
  113. this.field.focus(false, 10);
  114. },
  115. <span id='Ext-grid-CellEditor-method-realign'> /**
  116. </span> * @private
  117. * Realigns the Editor to the grid cell, or to the text node in the grid inner cell
  118. * if the inner cell contains multiple child nodes.
  119. */
  120. realign: function(autoSize) {
  121. var me = this,
  122. boundEl = me.boundEl,
  123. innerCell = boundEl.first(),
  124. children = innerCell.dom.childNodes,
  125. childCount = children.length,
  126. offsets = Ext.Array.clone(me.offsets),
  127. inputEl = me.field.inputEl,
  128. lastChild, leftBound, rightBound, width;
  129. // If the inner cell has more than one child, or the first child node is not a text node,
  130. // let's assume this cell contains additional elements before the text node.
  131. // This is the case for tree cells, but could also be used to accomodate grid cells that
  132. // have a custom renderer that render, say, an icon followed by some text for example
  133. // For now however, this support will only be used for trees.
  134. if(me.isForTree &amp;&amp; (childCount &gt; 1 || (childCount === 1 &amp;&amp; children[0].nodeType !== 3))) {
  135. // get the inner cell's last child
  136. lastChild = innerCell.last();
  137. // calculate the left bound of the text node
  138. leftBound = lastChild.getOffsetsTo(innerCell)[0] + lastChild.getWidth();
  139. // calculate the right bound of the text node (this is assumed to be the right edge of
  140. // the inner cell, since we are assuming the text node is always the last node in the
  141. // inner cell)
  142. rightBound = innerCell.getWidth();
  143. // difference between right and left bound is the text node's allowed &quot;width&quot;,
  144. // this will be used as the width for the editor.
  145. width = rightBound - leftBound;
  146. // adjust width for column lines - this ensures the editor will be the same width
  147. // regardless of columLines config
  148. if(!me.editingPlugin.grid.columnLines) {
  149. width --;
  150. }
  151. // set the editor's x offset to the left bound position
  152. offsets[0] += leftBound;
  153. me.addCls(Ext.baseCSSPrefix + 'grid-editor-on-text-node');
  154. } else {
  155. width = boundEl.getWidth() - 1;
  156. }
  157. if (autoSize === true) {
  158. me.field.setWidth(width);
  159. }
  160. me.alignTo(boundEl, me.alignment, offsets);
  161. },
  162. onEditorTab: function(e){
  163. var field = this.field;
  164. if (field.onEditorTab) {
  165. field.onEditorTab(e);
  166. }
  167. },
  168. alignment: &quot;tl-tl&quot;,
  169. hideEl : false,
  170. cls: Ext.baseCSSPrefix + &quot;small-editor &quot; + Ext.baseCSSPrefix + &quot;grid-editor&quot;,
  171. shim: false,
  172. shadow: false
  173. });</pre>
  174. </body>
  175. </html>