<!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-form-field-Spinner'>/**
|
</span> * A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,
|
* instead it is subclassed and the {@link #onSpinUp} and {@link #onSpinDown} methods are implemented
|
* to handle when the buttons are clicked. A good example of this is the {@link Ext.form.field.Number}
|
* field which uses the spinner to increment and decrement the field's value by its
|
* {@link Ext.form.field.Number#step step} config value.
|
*
|
* For example:
|
*
|
* @example
|
* Ext.define('Ext.ux.CustomSpinner', {
|
* extend: 'Ext.form.field.Spinner',
|
* alias: 'widget.customspinner',
|
*
|
* // override onSpinUp (using step isn't neccessary)
|
* onSpinUp: function() {
|
* var me = this;
|
* if (!me.readOnly) {
|
* var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of " Pack", defaults to zero on parse failure
|
* me.setValue((val + me.step) + ' Pack');
|
* }
|
* },
|
*
|
* // override onSpinDown
|
* onSpinDown: function() {
|
* var me = this;
|
* if (!me.readOnly) {
|
* var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of " Pack", defaults to zero on parse failure
|
* if (val <= me.step) {
|
* me.setValue('Dry!');
|
* } else {
|
* me.setValue((val - me.step) + ' Pack');
|
* }
|
* }
|
* }
|
* });
|
*
|
* Ext.create('Ext.form.FormPanel', {
|
* title: 'Form with SpinnerField',
|
* bodyPadding: 5,
|
* width: 350,
|
* renderTo: Ext.getBody(),
|
* items:[{
|
* xtype: 'customspinner',
|
* fieldLabel: 'How Much Beer?',
|
* step: 6
|
* }]
|
* });
|
*
|
* By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods;
|
* to prevent this, set `{@link #keyNavEnabled} = false`.
|
*/
|
Ext.define('Ext.form.field.Spinner', {
|
extend: 'Ext.form.field.Trigger',
|
alias: 'widget.spinnerfield',
|
alternateClassName: 'Ext.form.Spinner',
|
requires: ['Ext.util.KeyNav'],
|
|
<span id='Ext-form-field-Spinner-property-trigger1Cls'> trigger1Cls: Ext.baseCSSPrefix + 'form-spinner-up',
|
</span><span id='Ext-form-field-Spinner-property-trigger2Cls'> trigger2Cls: Ext.baseCSSPrefix + 'form-spinner-down',
|
</span>
|
<span id='Ext-form-field-Spinner-cfg-spinUpEnabled'> /**
|
</span> * @cfg {Boolean} spinUpEnabled
|
* Specifies whether the up spinner button is enabled. Defaults to true. To change this after the component is
|
* created, use the {@link #setSpinUpEnabled} method.
|
*/
|
spinUpEnabled: true,
|
|
<span id='Ext-form-field-Spinner-cfg-spinDownEnabled'> /**
|
</span> * @cfg {Boolean} spinDownEnabled
|
* Specifies whether the down spinner button is enabled. Defaults to true. To change this after the component is
|
* created, use the {@link #setSpinDownEnabled} method.
|
*/
|
spinDownEnabled: true,
|
|
<span id='Ext-form-field-Spinner-cfg-keyNavEnabled'> /**
|
</span> * @cfg {Boolean} keyNavEnabled
|
* Specifies whether the up and down arrow keys should trigger spinning up and down. Defaults to true.
|
*/
|
keyNavEnabled: true,
|
|
<span id='Ext-form-field-Spinner-cfg-mouseWheelEnabled'> /**
|
</span> * @cfg {Boolean} mouseWheelEnabled
|
* Specifies whether the mouse wheel should trigger spinning up and down while the field has focus.
|
* Defaults to true.
|
*/
|
mouseWheelEnabled: true,
|
|
<span id='Ext-form-field-Spinner-cfg-repeatTriggerClick'> /**
|
</span> * @cfg {Boolean} repeatTriggerClick
|
* Whether a {@link Ext.util.ClickRepeater click repeater} should be attached to the spinner buttons.
|
* Defaults to true.
|
*/
|
repeatTriggerClick: true,
|
|
<span id='Ext-form-field-Spinner-method-onSpinUp'> /**
|
</span> * @method
|
* @protected
|
* This method is called when the spinner up button is clicked, or when the up arrow key is pressed if
|
* {@link #keyNavEnabled} is true. Must be implemented by subclasses.
|
*/
|
onSpinUp: Ext.emptyFn,
|
|
<span id='Ext-form-field-Spinner-method-onSpinDown'> /**
|
</span> * @method
|
* @protected
|
* This method is called when the spinner down button is clicked, or when the down arrow key is pressed if
|
* {@link #keyNavEnabled} is true. Must be implemented by subclasses.
|
*/
|
onSpinDown: Ext.emptyFn,
|
|
<span id='Ext-form-field-Spinner-property-triggerTpl'> triggerTpl: '<td style="{triggerStyle}" class="{triggerCls}">' +
|
</span> '<div class="' + Ext.baseCSSPrefix + 'trigger-index-0 ' + Ext.baseCSSPrefix + 'form-trigger ' + Ext.baseCSSPrefix + 'form-spinner-up {spinnerUpCls} {childElCls}" role="button"></div>' +
|
'<div class="' + Ext.baseCSSPrefix + 'trigger-index-1 ' + Ext.baseCSSPrefix + 'form-trigger ' + Ext.baseCSSPrefix + 'form-spinner-down {spinnerDownCls} {childElCls}" role="button"></div>' +
|
'</td>' +
|
'</tr>',
|
|
<span id='Ext-form-field-Spinner-method-initComponent'> initComponent: function() {
|
</span> this.callParent();
|
|
this.addEvents(
|
<span id='Ext-form-field-Spinner-event-spin'> /**
|
</span> * @event spin
|
* Fires when the spinner is made to spin up or down.
|
* @param {Ext.form.field.Spinner} this
|
* @param {String} direction Either 'up' if spinning up, or 'down' if spinning down.
|
*/
|
'spin',
|
|
<span id='Ext-form-field-Spinner-event-spinup'> /**
|
</span> * @event spinup
|
* Fires when the spinner is made to spin up.
|
* @param {Ext.form.field.Spinner} this
|
*/
|
'spinup',
|
|
<span id='Ext-form-field-Spinner-event-spindown'> /**
|
</span> * @event spindown
|
* Fires when the spinner is made to spin down.
|
* @param {Ext.form.field.Spinner} this
|
*/
|
'spindown'
|
);
|
},
|
|
<span id='Ext-form-field-Spinner-method-onRender'> /**
|
</span> * @private
|
* Override.
|
*/
|
onRender: function() {
|
var me = this,
|
triggers;
|
|
me.callParent(arguments);
|
triggers = me.triggerEl;
|
|
<span id='Ext-form-field-Spinner-property-spinUpEl'> /**
|
</span> * @property {Ext.Element} spinUpEl
|
* The spinner up button element
|
*/
|
me.spinUpEl = triggers.item(0);
|
<span id='Ext-form-field-Spinner-property-spinDownEl'> /**
|
</span> * @property {Ext.Element} spinDownEl
|
* The spinner down button element
|
*/
|
me.spinDownEl = triggers.item(1);
|
|
me.triggerCell = me.spinUpEl.parent();
|
|
// Init up/down arrow keys
|
if (me.keyNavEnabled) {
|
me.spinnerKeyNav = new Ext.util.KeyNav(me.inputEl, {
|
scope: me,
|
up: me.spinUp,
|
down: me.spinDown
|
});
|
}
|
|
// Init mouse wheel
|
if (me.mouseWheelEnabled) {
|
me.mon(me.bodyEl, 'mousewheel', me.onMouseWheel, me);
|
}
|
},
|
|
<span id='Ext-form-field-Spinner-method-getSubTplMarkup'> getSubTplMarkup: function(values) {
|
</span> var me = this,
|
childElCls = values.childElCls, // either '' or ' x-foo'
|
field = Ext.form.field.Base.prototype.getSubTplMarkup.apply(me, arguments);
|
|
return '<table id="' + me.id + '-triggerWrap" class="' + Ext.baseCSSPrefix + 'form-trigger-wrap' + childElCls + '" cellpadding="0" cellspacing="0">' +
|
'<tbody>' +
|
'<tr><td id="' + me.id + '-inputCell" class="' + Ext.baseCSSPrefix + 'form-trigger-input-cell' + childElCls + '">' + field + '</td>' +
|
me.getTriggerMarkup() +
|
'</tbody></table>';
|
},
|
|
<span id='Ext-form-field-Spinner-method-getTriggerMarkup'> getTriggerMarkup: function() {
|
</span> return this.getTpl('triggerTpl').apply(this.getTriggerData());
|
},
|
|
<span id='Ext-form-field-Spinner-method-getTriggerData'> getTriggerData: function(){
|
</span> var me = this,
|
hideTrigger = (me.readOnly || me.hideTrigger);
|
|
return {
|
triggerCls: Ext.baseCSSPrefix + 'trigger-cell',
|
triggerStyle: hideTrigger ? 'display:none' : '',
|
spinnerUpCls: !me.spinUpEnabled ? me.trigger1Cls + '-disabled': '',
|
spinnerDownCls: !me.spinDownEnabled ? me.trigger2Cls + '-disabled': ''
|
};
|
},
|
|
<span id='Ext-form-field-Spinner-method-getTriggerWidth'> /**
|
</span> * Get the total width of the spinner button area.
|
* @return {Number} The total spinner button width
|
*/
|
getTriggerWidth: function() {
|
var me = this,
|
totalTriggerWidth = 0;
|
|
if (me.triggerWrap && !me.hideTrigger && !me.readOnly) {
|
totalTriggerWidth = me.triggerWidth;
|
}
|
return totalTriggerWidth;
|
},
|
|
<span id='Ext-form-field-Spinner-method-onTrigger1Click'> /**
|
</span> * @private
|
* Handles the spinner up button clicks.
|
*/
|
onTrigger1Click: function() {
|
this.spinUp();
|
},
|
|
<span id='Ext-form-field-Spinner-method-onTrigger2Click'> /**
|
</span> * @private
|
* Handles the spinner down button clicks.
|
*/
|
onTrigger2Click: function() {
|
this.spinDown();
|
},
|
|
<span id='Ext-form-field-Spinner-method-onTriggerWrapMouseup'> // private
|
</span> // Handle trigger mouse up gesture; refocuses the input element upon end of spin.
|
onTriggerWrapMouseup: function() {
|
this.inputEl.focus();
|
},
|
|
<span id='Ext-form-field-Spinner-method-spinUp'> /**
|
</span> * Triggers the spinner to step up; fires the {@link #spin} and {@link #spinup} events and calls the
|
* {@link #onSpinUp} method. Does nothing if the field is {@link #disabled} or if {@link #spinUpEnabled}
|
* is false.
|
*/
|
spinUp: function() {
|
var me = this;
|
if (me.spinUpEnabled && !me.disabled) {
|
me.fireEvent('spin', me, 'up');
|
me.fireEvent('spinup', me);
|
me.onSpinUp();
|
}
|
},
|
|
<span id='Ext-form-field-Spinner-method-spinDown'> /**
|
</span> * Triggers the spinner to step down; fires the {@link #spin} and {@link #spindown} events and calls the
|
* {@link #onSpinDown} method. Does nothing if the field is {@link #disabled} or if {@link #spinDownEnabled}
|
* is false.
|
*/
|
spinDown: function() {
|
var me = this;
|
if (me.spinDownEnabled && !me.disabled) {
|
me.fireEvent('spin', me, 'down');
|
me.fireEvent('spindown', me);
|
me.onSpinDown();
|
}
|
},
|
|
<span id='Ext-form-field-Spinner-method-setSpinUpEnabled'> /**
|
</span> * Sets whether the spinner up button is enabled.
|
* @param {Boolean} enabled true to enable the button, false to disable it.
|
*/
|
setSpinUpEnabled: function(enabled) {
|
var me = this,
|
wasEnabled = me.spinUpEnabled;
|
me.spinUpEnabled = enabled;
|
if (wasEnabled !== enabled && me.rendered) {
|
me.spinUpEl[enabled ? 'removeCls' : 'addCls'](me.trigger1Cls + '-disabled');
|
}
|
},
|
|
<span id='Ext-form-field-Spinner-method-setSpinDownEnabled'> /**
|
</span> * Sets whether the spinner down button is enabled.
|
* @param {Boolean} enabled true to enable the button, false to disable it.
|
*/
|
setSpinDownEnabled: function(enabled) {
|
var me = this,
|
wasEnabled = me.spinDownEnabled;
|
me.spinDownEnabled = enabled;
|
if (wasEnabled !== enabled && me.rendered) {
|
me.spinDownEl[enabled ? 'removeCls' : 'addCls'](me.trigger2Cls + '-disabled');
|
}
|
},
|
|
<span id='Ext-form-field-Spinner-method-onMouseWheel'> /**
|
</span> * @private
|
* Handles mousewheel events on the field
|
*/
|
onMouseWheel: function(e) {
|
var me = this,
|
delta;
|
if (me.hasFocus) {
|
delta = e.getWheelDelta();
|
if (delta > 0) {
|
me.spinUp();
|
} else if (delta < 0) {
|
me.spinDown();
|
}
|
e.stopEvent();
|
}
|
},
|
|
<span id='Ext-form-field-Spinner-method-onDestroy'> onDestroy: function() {
|
</span> Ext.destroyMembers(this, 'spinnerKeyNav', 'spinUpEl', 'spinDownEl');
|
this.callParent();
|
}
|
|
});</pre>
|
</body>
|
</html>
|