/**
- * @class Ext.form.field.Picker
- * @extends Ext.form.field.Trigger
- * <p>An abstract class for fields that have a single trigger which opens a "picker" popup below
- * the field, e.g. a combobox menu list or a date picker. It provides a base implementation for
- * toggling the picker's visibility when the trigger is clicked, as well as keyboard navigation
- * and some basic events. Sizing and alignment of the picker can be controlled via the {@link #matchFieldWidth}
- * and {@link #pickerAlign}/{@link #pickerOffset} config properties respectively.</p>
- * <p>You would not normally use this class directly, but instead use it as the parent class for
- * a specific picker field implementation. Subclasses must implement the {@link #createPicker} method
- * to create a picker component appropriate for the field.</p>
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * An abstract class for fields that have a single trigger which opens a "picker" popup below the field, e.g. a combobox
+ * menu list or a date picker. It provides a base implementation for toggling the picker's visibility when the trigger
+ * is clicked, as well as keyboard navigation and some basic events. Sizing and alignment of the picker can be
+ * controlled via the {@link #matchFieldWidth} and {@link #pickerAlign}/{@link #pickerOffset} config properties
+ * respectively.
*
- * @xtype pickerfield
- * @constructor
- * Create a new picker field
- * @param {Object} config
+ * You would not normally use this class directly, but instead use it as the parent class for a specific picker field
+ * implementation. Subclasses must implement the {@link #createPicker} method to create a picker component appropriate
+ * for the field.
*/
Ext.define('Ext.form.field.Picker', {
extend: 'Ext.form.field.Trigger',
@@ -21,44 +32,41 @@ Ext.define('Ext.form.field.Picker', {
alternateClassName: 'Ext.form.Picker',
requires: ['Ext.util.KeyNav'],
- /**
+ /**
* @cfg {Boolean} matchFieldWidth
- * Whether the picker dropdown's width should be explicitly set to match the width of the field.
- * Defaults to <tt>true</tt>.
+ * Whether the picker dropdown's width should be explicitly set to match the width of the field. Defaults to true.
*/
matchFieldWidth: true,
- /**
+ /**
* @cfg {String} pickerAlign
- * The {@link Ext.core.Element#alignTo alignment position} with which to align the picker. Defaults
- * to <tt>"tl-bl?"</tt>
+ * The {@link Ext.Element#alignTo alignment position} with which to align the picker. Defaults to "tl-bl?"
*/
pickerAlign: 'tl-bl?',
- /**
- * @cfg {Array} pickerOffset
+ /**
+ * @cfg {Number[]} pickerOffset
* An offset [x,y] to use in addition to the {@link #pickerAlign} when positioning the picker.
* Defaults to undefined.
*/
- /**
+ /**
* @cfg {String} openCls
- * A class to be added to the field's {@link #bodyEl} element when the picker is opened. Defaults
- * to 'x-pickerfield-open'.
+ * A class to be added to the field's {@link #bodyEl} element when the picker is opened.
+ * Defaults to 'x-pickerfield-open'.
*/
openCls: Ext.baseCSSPrefix + 'pickerfield-open',
- /**
- * @property isExpanded
- * @type Boolean
+ /**
+ * @property {Boolean} isExpanded
* True if the picker is currently expanded, false if not.
*/
- /**
- * @cfg {Boolean} editable <tt>false</tt> to prevent the user from typing text directly into the field;
- * the field can only have its value set via selecting a value from the picker. In this state, the picker
- * can also be opened by clicking directly on the input field itself.
- * (defaults to <tt>true</tt>).
+ /**
+ * @cfg {Boolean} editable
+ * False to prevent the user from typing text directly into the field; the field can only have its value set via
+ * selecting a value from the picker. In this state, the picker can also be opened by clicking directly on the input
+ * field itself.
*/
editable: true,
@@ -68,23 +76,23 @@ Ext.define('Ext.form.field.Picker', {
// Custom events
this.addEvents(
- /**
+ /**
* @event expand
* Fires when the field's picker is expanded.
* @param {Ext.form.field.Picker} field This field instance
*/
'expand',
- /**
+ /**
* @event collapse
* Fires when the field's picker is collapsed.
* @param {Ext.form.field.Picker} field This field instance
*/
'collapse',
- /**
+ /**
* @event select
* Fires when a value is selected via the picker.
* @param {Ext.form.field.Picker} field This field instance
- * @param {Mixed} value The value that was selected. The exact type of this value is dependent on
+ * @param {Object} value The value that was selected. The exact type of this value is dependent on
* the individual field and picker implementations.
*/
'select'
@@ -122,8 +130,8 @@ Ext.define('Ext.form.field.Picker', {
},
- /**
- * Expand this field's picker dropdown.
+ /**
+ * Expands this field's picker dropdown.
*/
expand: function() {
var me = this,
@@ -146,7 +154,7 @@ Ext.define('Ext.form.field.Picker', {
mousedown: collapseIf,
scope: me
});
-
+ Ext.EventManager.onWindowResize(me.alignPicker, me);
me.fireEvent('expand', me);
me.onExpand();
}
@@ -154,35 +162,46 @@ Ext.define('Ext.form.field.Picker', {
onExpand: Ext.emptyFn,
- /**
- * @protected
- * Aligns the picker to the
+ /**
+ * Aligns the picker to the input element
+ * @protected
*/
alignPicker: function() {
var me = this,
- picker, isAbove,
- aboveSfx = '-above';
+ picker;
- if (this.isExpanded) {
+ if (me.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
// Auto the height (it will be constrained by min and max width) unless there are no records to display.
picker.setSize(me.bodyEl.getWidth(), picker.store && picker.store.getCount() ? null : 0);
}
if (picker.isFloating()) {
- picker.alignTo(me.inputEl, me.pickerAlign, me.pickerOffset);
-
- // add the {openCls}-above class if the picker was aligned above
- // the field due to hitting the bottom of the viewport
- isAbove = picker.el.getY() < me.inputEl.getY();
- me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
- picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
+ me.doAlign();
}
}
},
- /**
- * Collapse this field's picker dropdown.
+ /**
+ * Performs the alignment on the picker using the class defaults
+ * @private
+ */
+ doAlign: function(){
+ var me = this,
+ picker = me.picker,
+ aboveSfx = '-above',
+ isAbove;
+
+ me.picker.alignTo(me.inputEl, me.pickerAlign, me.pickerOffset);
+ // add the {openCls}-above class if the picker was aligned above
+ // the field due to hitting the bottom of the viewport
+ isAbove = picker.el.getY() < me.inputEl.getY();
+ me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
+ picker[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
+ },
+
+ /**
+ * Collapses this field's picker dropdown.
*/
collapse: function() {
if (this.isExpanded && !this.isDestroyed) {
@@ -204,7 +223,7 @@ Ext.define('Ext.form.field.Picker', {
// remove event listeners
doc.un('mousewheel', collapseIf, me);
doc.un('mousedown', collapseIf, me);
-
+ Ext.EventManager.removeResizeListener(me.alignPicker, me);
me.fireEvent('collapse', me);
me.onCollapse();
}
@@ -213,7 +232,7 @@ Ext.define('Ext.form.field.Picker', {
onCollapse: Ext.emptyFn,
- /**
+ /**
* @private
* Runs on mousewheel and mousedown of doc to check to see if we should collapse the picker
*/
@@ -224,8 +243,8 @@ Ext.define('Ext.form.field.Picker', {
}
},
- /**
- * Return a reference to the picker component for this field, creating it if necessary by
+ /**
+ * Returns a reference to the picker component for this field, creating it if necessary by
* calling {@link #createPicker}.
* @return {Ext.Component} The picker component
*/
@@ -234,16 +253,17 @@ Ext.define('Ext.form.field.Picker', {
return me.picker || (me.picker = me.createPicker());
},
- /**
- * Create and return the component to be used as this field's picker. Must be implemented
- * by subclasses of Picker.
- * @return {Ext.Component} The picker component
+ /**
+ * @method
+ * Creates and returns the component to be used as this field's picker. Must be implemented by subclasses of Picker.
+ * The current field should also be passed as a configuration option to the picker component as the pickerField
+ * property.
*/
createPicker: Ext.emptyFn,
- /**
- * Handles the trigger click; by default toggles between expanding and collapsing the
- * picker component.
+ /**
+ * Handles the trigger click; by default toggles between expanding and collapsing the picker component.
+ * @protected
*/
onTriggerClick: function() {
var me = this;
@@ -267,11 +287,20 @@ Ext.define('Ext.form.field.Picker', {
},
onDestroy : function(){
- var me = this;
- Ext.destroy(me.picker, me.keyNav);
+ var me = this,
+ picker = me.picker;
+
+ Ext.EventManager.removeResizeListener(me.alignPicker, me);
+ Ext.destroy(me.keyNav);
+ if (picker) {
+ delete picker.pickerField;
+ picker.destroy();
+ }
me.callParent();
}
});
-