3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
8 * @class Ext.ux.Spinner
9 * @extends Ext.util.Observable
10 * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
12 Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
14 alternateIncrementValue: 5,
15 triggerClass: 'x-form-spinner-trigger',
16 splitterClass: 'x-form-spinner-splitter',
17 alternateKey: Ext.EventObject.shiftKey,
21 constructor: function(config){
22 Ext.ux.Spinner.superclass.constructor.call(this, config);
23 Ext.apply(this, config);
24 this.mimicing = false;
27 init: function(field){
30 field.afterMethod('onRender', this.doRender, this);
31 field.afterMethod('onEnable', this.doEnable, this);
32 field.afterMethod('onDisable', this.doDisable, this);
33 field.afterMethod('afterRender', this.doAfterRender, this);
34 field.afterMethod('onResize', this.doResize, this);
35 field.afterMethod('onFocus', this.doFocus, this);
36 field.beforeMethod('onDestroy', this.doDestroy, this);
39 doRender: function(ct, position){
40 var el = this.el = this.field.getEl();
44 f.wrap = this.wrap = el.wrap({
45 cls: "x-form-field-wrap"
49 this.wrap = f.wrap.addClass('x-form-field-wrap');
52 this.trigger = this.wrap.createChild({
54 src: Ext.BLANK_IMAGE_URL,
55 cls: "x-form-trigger " + this.triggerClass
59 this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
62 this.splitter = this.wrap.createChild({
64 cls: this.splitterClass,
65 style: 'width:13px; height:2px;'
67 this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
69 this.proxy = this.trigger.createProxy('', this.splitter, true);
70 this.proxy.addClass("x-form-spinner-proxy");
71 this.proxy.setStyle('left', '0px');
72 this.proxy.setSize(14, 1);
74 this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
75 dragElId: this.proxy.id
82 doAfterRender: function(){
84 if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
92 this.disabled = false;
93 this.wrap.removeClass(this.field.disabledClass);
97 doDisable: function(){
100 this.wrap.addClass(this.field.disabledClass);
101 this.el.removeClass(this.field.disabledClass);
105 doResize: function(w, h){
106 if (typeof w == 'number') {
107 this.el.setWidth(w - this.trigger.getWidth());
109 this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
113 if (!this.mimicing) {
114 this.wrap.addClass('x-trigger-wrap-focus');
115 this.mimicing = true;
116 Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
119 this.el.on('keydown', this.checkTab, this);
124 checkTab: function(e){
125 if (e.getKey() == e.TAB) {
131 mimicBlur: function(e){
132 if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
138 triggerBlur: function(){
139 this.mimicing = false;
140 Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
141 this.el.un("keydown", this.checkTab, this);
142 this.field.beforeBlur();
143 this.wrap.removeClass('x-trigger-wrap-focus');
144 this.field.onBlur.call(this.field);
147 initTrigger: function(){
148 this.trigger.addClassOnOver('x-form-trigger-over');
149 this.trigger.addClassOnClick('x-form-trigger-click');
152 initSpinner: function(){
153 this.field.addEvents({
159 this.keyNav = new Ext.KeyNav(this.el, {
170 "pageUp": function(e){
172 this.onSpinUpAlternate();
175 "pageDown": function(e){
177 this.onSpinDownAlternate();
183 this.repeater = new Ext.util.ClickRepeater(this.trigger, {
184 accelerate: this.accelerate
186 this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
190 this.field.mon(this.trigger, {
191 mouseover: this.onMouseOver,
192 mouseout: this.onMouseOut,
193 mousemove: this.onMouseMove,
194 mousedown: this.onMouseDown,
195 mouseup: this.onMouseUp,
200 this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
202 this.dd.setXConstraint(0, 0, 10)
203 this.dd.setYConstraint(1500, 1500, 10);
204 this.dd.endDrag = this.endDrag.createDelegate(this);
205 this.dd.startDrag = this.startDrag.createDelegate(this);
206 this.dd.onDrag = this.onDrag.createDelegate(this);
209 onMouseOver: function(){
213 var middle = this.getMiddle();
214 this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
215 this.trigger.addClass(this.tmpHoverClass);
219 onMouseOut: function(){
220 this.trigger.removeClass(this.tmpHoverClass);
224 onMouseMove: function(){
228 var middle = this.getMiddle();
229 if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
230 ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
235 onMouseDown: function(){
239 var middle = this.getMiddle();
240 this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
241 this.trigger.addClass(this.tmpClickClass);
245 onMouseUp: function(){
246 this.trigger.removeClass(this.tmpClickClass);
250 onTriggerClick: function(){
251 if (this.disabled || this.el.dom.readOnly) {
254 var middle = this.getMiddle();
255 var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
256 this['onSpin' + ud]();
260 getMiddle: function(){
261 var t = this.trigger.getTop();
262 var h = this.trigger.getHeight();
263 var middle = t + (h / 2);
268 //checks if control is allowed to spin
269 isSpinnable: function(){
270 if (this.disabled || this.el.dom.readOnly) {
271 Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
277 handleMouseWheel: function(e){
278 //disable scrolling when not focused
279 if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
283 var delta = e.getWheelDelta();
296 startDrag: function(){
298 this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
311 var y = Ext.fly(this.dd.getDragEl()).getTop();
314 if (this._previousY > y) {
317 if (this._previousY < y) {
321 this['onSpin' + ud]();
328 onSpinUp: function(){
329 if (this.isSpinnable() == false) {
332 if (Ext.EventObject.shiftKey == true) {
333 this.onSpinUpAlternate();
337 this.spin(false, false);
339 this.field.fireEvent("spin", this);
340 this.field.fireEvent("spinup", this);
344 onSpinDown: function(){
345 if (this.isSpinnable() == false) {
348 if (Ext.EventObject.shiftKey == true) {
349 this.onSpinDownAlternate();
353 this.spin(true, false);
355 this.field.fireEvent("spin", this);
356 this.field.fireEvent("spindown", this);
360 onSpinUpAlternate: function(){
361 if (this.isSpinnable() == false) {
364 this.spin(false, true);
365 this.field.fireEvent("spin", this);
366 this.field.fireEvent("spinup", this);
370 onSpinDownAlternate: function(){
371 if (this.isSpinnable() == false) {
374 this.spin(true, true);
375 this.field.fireEvent("spin", this);
376 this.field.fireEvent("spindown", this);
379 spin: function(down, alternate){
380 var v = parseFloat(this.field.getValue());
381 var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
382 (down == true) ? v -= incr : v += incr;
384 v = (isNaN(v)) ? this.defaultValue : v;
385 v = this.fixBoundries(v);
386 this.field.setRawValue(v);
389 fixBoundries: function(value){
392 if (this.field.minValue != undefined && v < this.field.minValue) {
393 v = this.field.minValue;
395 if (this.field.maxValue != undefined && v > this.field.maxValue) {
396 v = this.field.maxValue;
399 return this.fixPrecision(v);
403 fixPrecision: function(value){
404 var nan = isNaN(value);
405 if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
406 return nan ? '' : value;
408 return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
411 doDestroy: function(){
413 this.trigger.remove();
417 delete this.field.wrap;
421 this.splitter.remove();
434 this.repeater.purgeListeners();
437 Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
443 Ext.form.Spinner = Ext.ux.Spinner;