/ext-4.1.0_b3/docs/source/Picker.html

https://bitbucket.org/srogerf/javascript · HTML · 328 lines · 288 code · 40 blank · 0 comment · 0 complexity · 6da217d15a7512af73a94cc3021fd3b5 MD5 · raw file

  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-form-field-Picker'>/**
  19. </span> * An abstract class for fields that have a single trigger which opens a &quot;picker&quot; popup below the field, e.g. a combobox
  20. * menu list or a date picker. It provides a base implementation for toggling the picker's visibility when the trigger
  21. * is clicked, as well as keyboard navigation and some basic events. Sizing and alignment of the picker can be
  22. * controlled via the {@link #matchFieldWidth} and {@link #pickerAlign}/{@link #pickerOffset} config properties
  23. * respectively.
  24. *
  25. * You would not normally use this class directly, but instead use it as the parent class for a specific picker field
  26. * implementation. Subclasses must implement the {@link #createPicker} method to create a picker component appropriate
  27. * for the field.
  28. */
  29. Ext.define('Ext.form.field.Picker', {
  30. extend: 'Ext.form.field.Trigger',
  31. alias: 'widget.pickerfield',
  32. alternateClassName: 'Ext.form.Picker',
  33. requires: ['Ext.util.KeyNav'],
  34. <span id='Ext-form-field-Picker-cfg-matchFieldWidth'> /**
  35. </span> * @cfg {Boolean} matchFieldWidth
  36. * Whether the picker dropdown's width should be explicitly set to match the width of the field. Defaults to true.
  37. */
  38. matchFieldWidth: true,
  39. <span id='Ext-form-field-Picker-cfg-pickerAlign'> /**
  40. </span> * @cfg {String} pickerAlign
  41. * The {@link Ext.Element#alignTo alignment position} with which to align the picker. Defaults to &quot;tl-bl?&quot;
  42. */
  43. pickerAlign: 'tl-bl?',
  44. <span id='Ext-form-field-Picker-cfg-pickerOffset'> /**
  45. </span> * @cfg {Number[]} pickerOffset
  46. * An offset [x,y] to use in addition to the {@link #pickerAlign} when positioning the picker.
  47. * Defaults to undefined.
  48. */
  49. <span id='Ext-form-field-Picker-cfg-openCls'> /**
  50. </span> * @cfg {String} [openCls='x-pickerfield-open']
  51. * A class to be added to the field's {@link #bodyEl} element when the picker is opened.
  52. */
  53. openCls: Ext.baseCSSPrefix + 'pickerfield-open',
  54. <span id='Ext-form-field-Picker-property-isExpanded'> /**
  55. </span> * @property {Boolean} isExpanded
  56. * True if the picker is currently expanded, false if not.
  57. */
  58. <span id='Ext-form-field-Picker-cfg-editable'> /**
  59. </span> * @cfg {Boolean} editable
  60. * False to prevent the user from typing text directly into the field; the field can only have its value set via
  61. * selecting a value from the picker. In this state, the picker can also be opened by clicking directly on the input
  62. * field itself.
  63. */
  64. editable: true,
  65. initComponent: function() {
  66. this.callParent();
  67. // Custom events
  68. this.addEvents(
  69. <span id='Ext-form-field-Picker-event-expand'> /**
  70. </span> * @event expand
  71. * Fires when the field's picker is expanded.
  72. * @param {Ext.form.field.Picker} field This field instance
  73. */
  74. 'expand',
  75. <span id='Ext-form-field-Picker-event-collapse'> /**
  76. </span> * @event collapse
  77. * Fires when the field's picker is collapsed.
  78. * @param {Ext.form.field.Picker} field This field instance
  79. */
  80. 'collapse',
  81. <span id='Ext-form-field-Picker-event-select'> /**
  82. </span> * @event select
  83. * Fires when a value is selected via the picker.
  84. * @param {Ext.form.field.Picker} field This field instance
  85. * @param {Object} value The value that was selected. The exact type of this value is dependent on
  86. * the individual field and picker implementations.
  87. */
  88. 'select'
  89. );
  90. },
  91. initEvents: function() {
  92. var me = this;
  93. me.callParent();
  94. // Add handlers for keys to expand/collapse the picker
  95. me.keyNav = new Ext.util.KeyNav(me.inputEl, {
  96. down: me.onDownArrow,
  97. esc: {
  98. handler: me.onEsc,
  99. scope: me,
  100. defaultEventAction: false
  101. },
  102. scope: me,
  103. forceKeyDown: true
  104. });
  105. // Non-editable allows opening the picker by clicking the field
  106. if (!me.editable) {
  107. me.mon(me.inputEl, 'click', me.onTriggerClick, me);
  108. }
  109. // Disable native browser autocomplete
  110. if (Ext.isGecko) {
  111. me.inputEl.dom.setAttribute('autocomplete', 'off');
  112. }
  113. },
  114. // private
  115. onEsc: function(e) {
  116. var me = this;
  117. if (me.isExpanded) {
  118. me.collapse();
  119. e.stopEvent();
  120. } else {
  121. // If there's an ancestor Window which will see the ESC event and hide, ensure this Field blurs
  122. // so that a down arrow will not pop up a disembodied dropdown list.
  123. if (me.up('window')) {
  124. me.blur();
  125. }
  126. // Otherwise, only stop the ESC key event if it's not going to bubble up to the FocusManager
  127. else if ((!Ext.FocusManager || !Ext.FocusManager.enabled)) {
  128. e.stopEvent();
  129. }
  130. }
  131. },
  132. onDownArrow: function(e) {
  133. if (!this.isExpanded) {
  134. // Don't call expand() directly as there may be additional processing involved before
  135. // expanding, e.g. in the case of a ComboBox query.
  136. this.onTriggerClick();
  137. }
  138. },
  139. <span id='Ext-form-field-Picker-method-expand'> /**
  140. </span> * Expands this field's picker dropdown.
  141. */
  142. expand: function() {
  143. var me = this,
  144. bodyEl, picker, collapseIf;
  145. if (me.rendered &amp;&amp; !me.isExpanded &amp;&amp; !me.isDestroyed) {
  146. bodyEl = me.bodyEl;
  147. picker = me.getPicker();
  148. collapseIf = me.collapseIf;
  149. // show the picker and set isExpanded flag
  150. picker.show();
  151. me.isExpanded = true;
  152. me.alignPicker();
  153. bodyEl.addCls(me.openCls);
  154. // monitor clicking and mousewheel
  155. me.mon(Ext.getDoc(), {
  156. mousewheel: collapseIf,
  157. mousedown: collapseIf,
  158. scope: me
  159. });
  160. Ext.EventManager.onWindowResize(me.alignPicker, me);
  161. me.fireEvent('expand', me);
  162. me.onExpand();
  163. }
  164. },
  165. onExpand: Ext.emptyFn,
  166. <span id='Ext-form-field-Picker-method-alignPicker'> /**
  167. </span> * Aligns the picker to the input element
  168. * @protected
  169. */
  170. alignPicker: function() {
  171. var me = this,
  172. picker = me.getPicker();
  173. if (me.isExpanded) {
  174. if (me.matchFieldWidth) {
  175. // Auto the height (it will be constrained by min and max width) unless there are no records to display.
  176. picker.setWidth(me.bodyEl.getWidth());
  177. }
  178. if (picker.isFloating()) {
  179. me.doAlign();
  180. }
  181. }
  182. },
  183. <span id='Ext-form-field-Picker-method-doAlign'> /**
  184. </span> * Performs the alignment on the picker using the class defaults
  185. * @private
  186. */
  187. doAlign: function(){
  188. var me = this,
  189. picker = me.picker,
  190. aboveSfx = '-above',
  191. isAbove;
  192. me.picker.alignTo(me.inputEl, me.pickerAlign, me.pickerOffset);
  193. // add the {openCls}-above class if the picker was aligned above
  194. // the field due to hitting the bottom of the viewport
  195. isAbove = picker.el.getY() &lt; me.inputEl.getY();
  196. me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
  197. picker[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
  198. },
  199. <span id='Ext-form-field-Picker-method-collapse'> /**
  200. </span> * Collapses this field's picker dropdown.
  201. */
  202. collapse: function() {
  203. if (this.isExpanded &amp;&amp; !this.isDestroyed) {
  204. var me = this,
  205. openCls = me.openCls,
  206. picker = me.picker,
  207. doc = Ext.getDoc(),
  208. collapseIf = me.collapseIf,
  209. aboveSfx = '-above';
  210. // hide the picker and set isExpanded flag
  211. picker.hide();
  212. me.isExpanded = false;
  213. // remove the openCls
  214. me.bodyEl.removeCls([openCls, openCls + aboveSfx]);
  215. picker.el.removeCls(picker.baseCls + aboveSfx);
  216. // remove event listeners
  217. doc.un('mousewheel', collapseIf, me);
  218. doc.un('mousedown', collapseIf, me);
  219. Ext.EventManager.removeResizeListener(me.alignPicker, me);
  220. me.fireEvent('collapse', me);
  221. me.onCollapse();
  222. }
  223. },
  224. onCollapse: Ext.emptyFn,
  225. <span id='Ext-form-field-Picker-method-collapseIf'> /**
  226. </span> * @private
  227. * Runs on mousewheel and mousedown of doc to check to see if we should collapse the picker
  228. */
  229. collapseIf: function(e) {
  230. var me = this;
  231. if (!me.isDestroyed &amp;&amp; !e.within(me.bodyEl, false, true) &amp;&amp; !e.within(me.picker.el, false, true)) {
  232. me.collapse();
  233. }
  234. },
  235. <span id='Ext-form-field-Picker-method-getPicker'> /**
  236. </span> * Returns a reference to the picker component for this field, creating it if necessary by
  237. * calling {@link #createPicker}.
  238. * @return {Ext.Component} The picker component
  239. */
  240. getPicker: function() {
  241. var me = this;
  242. return me.picker || (me.picker = me.createPicker());
  243. },
  244. <span id='Ext-form-field-Picker-method-createPicker'> /**
  245. </span> * @method
  246. * Creates and returns the component to be used as this field's picker. Must be implemented by subclasses of Picker.
  247. * The current field should also be passed as a configuration option to the picker component as the pickerField
  248. * property.
  249. */
  250. createPicker: Ext.emptyFn,
  251. <span id='Ext-form-field-Picker-method-onTriggerClick'> /**
  252. </span> * Handles the trigger click; by default toggles between expanding and collapsing the picker component.
  253. * @protected
  254. */
  255. onTriggerClick: function() {
  256. var me = this;
  257. if (!me.readOnly &amp;&amp; !me.disabled) {
  258. if (me.isExpanded) {
  259. me.collapse();
  260. } else {
  261. me.expand();
  262. }
  263. me.inputEl.focus();
  264. }
  265. },
  266. mimicBlur: function(e) {
  267. var me = this,
  268. picker = me.picker;
  269. // ignore mousedown events within the picker element
  270. if (!picker || !e.within(picker.el, false, true)) {
  271. me.callParent(arguments);
  272. }
  273. },
  274. onDestroy : function(){
  275. var me = this,
  276. picker = me.picker;
  277. Ext.EventManager.removeResizeListener(me.alignPicker, me);
  278. Ext.destroy(me.keyNav);
  279. if (picker) {
  280. delete picker.pickerField;
  281. picker.destroy();
  282. }
  283. me.callParent();
  284. }
  285. });
  286. </pre>
  287. </body>
  288. </html>