Trigger.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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-layout-component-field-Trigger'>/**
  19. </span> * Layout class for {@link Ext.form.field.Trigger} fields. Adjusts the input field size to accommodate
  20. * the trigger button(s).
  21. * @private
  22. */
  23. Ext.define('Ext.layout.component.field.Trigger', {
  24. /* Begin Definitions */
  25. alias: 'layout.triggerfield',
  26. extend: 'Ext.layout.component.field.Field',
  27. /* End Definitions */
  28. type: 'triggerfield',
  29. beginLayout: function(ownerContext) {
  30. var me = this,
  31. owner = me.owner,
  32. flags;
  33. ownerContext.triggerWrap = ownerContext.getEl('triggerWrap');
  34. me.callParent(arguments);
  35. // if any of these important states have changed, sync them now:
  36. flags = owner.getTriggerStateFlags();
  37. if (flags != owner.lastTriggerStateFlags) {
  38. owner.lastTriggerStateFlags = flags;
  39. me.updateEditState();
  40. }
  41. },
  42. beginLayoutFixed: function (ownerContext, width, suffix) {
  43. var me = this,
  44. owner = ownerContext.target,
  45. ieInputWidthAdjustment = me.ieInputWidthAdjustment || 0,
  46. inputWidth = '100%',
  47. triggerWrap = owner.triggerWrap;
  48. me.callParent(arguments);
  49. owner.inputCell.setStyle('width', '100%');
  50. if(ieInputWidthAdjustment) {
  51. // adjust for IE 6/7 strict content-box model
  52. // RTL: This might have to be padding-left unless the senses of the padding styles switch when in RTL mode.
  53. owner.inputCell.setStyle('padding-right', ieInputWidthAdjustment + 'px');
  54. if(suffix === 'px') {
  55. if (owner.inputWidth) {
  56. inputWidth = owner.inputWidth - owner.getTriggerWidth();
  57. } else {
  58. inputWidth = width - ieInputWidthAdjustment - owner.getTriggerWidth();
  59. }
  60. inputWidth += 'px';
  61. }
  62. }
  63. owner.inputEl.setStyle('width', inputWidth);
  64. inputWidth = owner.inputWidth;
  65. if (inputWidth) {
  66. triggerWrap.setStyle('width', inputWidth + (ieInputWidthAdjustment) + 'px');
  67. } else {
  68. triggerWrap.setStyle('width', width + suffix);
  69. }
  70. triggerWrap.setStyle('table-layout', 'fixed');
  71. },
  72. beginLayoutShrinkWrap: function (ownerContext) {
  73. var owner = ownerContext.target,
  74. emptyString = '',
  75. inputWidth = owner.inputWidth,
  76. triggerWrap = owner.triggerWrap,
  77. ieInputWidthAdjustment = this.ieInputWidthAdjustment || 0;
  78. this.callParent(arguments);
  79. if (inputWidth) {
  80. triggerWrap.setStyle('width', inputWidth + 'px');
  81. inputWidth = (inputWidth - owner.getTriggerWidth()) + 'px';
  82. owner.inputEl.setStyle('width', inputWidth);
  83. owner.inputCell.setStyle('width', inputWidth);
  84. } else {
  85. owner.inputCell.setStyle('width', emptyString);
  86. owner.inputEl.setStyle('width', emptyString);
  87. triggerWrap.setStyle('width', emptyString);
  88. triggerWrap.setStyle('table-layout', 'auto');
  89. }
  90. },
  91. getTextWidth: function () {
  92. var me = this,
  93. owner = me.owner,
  94. inputEl = owner.inputEl,
  95. value;
  96. // Find the width that contains the whole text value
  97. value = (inputEl.dom.value || (owner.hasFocus ? '' : owner.emptyText) || '') + owner.growAppend;
  98. return inputEl.getTextWidth(value);
  99. },
  100. measureContentWidth: function (ownerContext) {
  101. var me = this,
  102. owner = me.owner,
  103. width = me.callParent(arguments),
  104. inputContext = ownerContext.inputContext,
  105. calcWidth, max, min;
  106. if (owner.grow &amp;&amp; !ownerContext.state.growHandled) {
  107. calcWidth = me.getTextWidth() + ownerContext.inputContext.getFrameInfo().width;
  108. max = owner.growMax;
  109. min = Math.min(max, width);
  110. max = Math.max(owner.growMin, max, min);
  111. // Constrain
  112. calcWidth = Ext.Number.constrain(calcWidth, owner.growMin, max);
  113. inputContext.setWidth(calcWidth);
  114. ownerContext.state.growHandled = true;
  115. // Now that we've set the inputContext, we need to recalculate the width
  116. inputContext.domBlock(me, 'width');
  117. width = NaN;
  118. }
  119. return width;
  120. },
  121. updateEditState: function() {
  122. var me = this,
  123. owner = me.owner,
  124. inputEl = owner.inputEl,
  125. noeditCls = Ext.baseCSSPrefix + 'trigger-noedit',
  126. displayed,
  127. readOnly;
  128. if (me.owner.readOnly) {
  129. inputEl.addCls(noeditCls);
  130. readOnly = true;
  131. displayed = false;
  132. } else {
  133. if (me.owner.editable) {
  134. inputEl.removeCls(noeditCls);
  135. readOnly = false;
  136. } else {
  137. inputEl.addCls(noeditCls);
  138. readOnly = true;
  139. }
  140. displayed = !me.owner.hideTrigger;
  141. }
  142. owner.triggerCell.setDisplayed(displayed);
  143. inputEl.dom.readOnly = readOnly;
  144. }
  145. });
  146. </pre>
  147. </body>
  148. </html>