3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.ux.Spinner
\r
9 * @extends Ext.util.Observable
\r
10 * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
\r
12 Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
\r
14 alternateIncrementValue: 5,
\r
15 triggerClass: 'x-form-spinner-trigger',
\r
16 splitterClass: 'x-form-spinner-splitter',
\r
17 alternateKey: Ext.EventObject.shiftKey,
\r
21 constructor: function(config){
\r
22 Ext.ux.Spinner.superclass.constructor.call(this, config);
\r
23 Ext.apply(this, config);
\r
24 this.mimicing = false;
\r
27 init: function(field){
\r
30 field.afterMethod('onRender', this.doRender, this);
\r
31 field.afterMethod('onEnable', this.doEnable, this);
\r
32 field.afterMethod('onDisable', this.doDisable, this);
\r
33 field.afterMethod('afterRender', this.doAfterRender, this);
\r
34 field.afterMethod('onResize', this.doResize, this);
\r
35 field.afterMethod('onFocus', this.doFocus, this);
\r
36 field.beforeMethod('onDestroy', this.doDestroy, this);
\r
39 doRender: function(ct, position){
\r
40 var el = this.el = this.field.getEl();
\r
44 f.wrap = this.wrap = el.wrap({
\r
45 cls: "x-form-field-wrap"
\r
49 this.wrap = f.wrap.addClass('x-form-field-wrap');
\r
52 this.trigger = this.wrap.createChild({
\r
54 src: Ext.BLANK_IMAGE_URL,
\r
55 cls: "x-form-trigger " + this.triggerClass
\r
59 this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
\r
62 this.splitter = this.wrap.createChild({
\r
64 cls: this.splitterClass,
\r
65 style: 'width:13px; height:2px;'
\r
67 this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
\r
69 this.proxy = this.trigger.createProxy('', this.splitter, true);
\r
70 this.proxy.addClass("x-form-spinner-proxy");
\r
71 this.proxy.setStyle('left', '0px');
\r
72 this.proxy.setSize(14, 1);
\r
74 this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
\r
75 dragElId: this.proxy.id
\r
82 doAfterRender: function(){
\r
84 if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
\r
90 doEnable: function(){
\r
92 this.wrap.removeClass(this.field.disabledClass);
\r
96 doDisable: function(){
\r
98 this.wrap.addClass(this.field.disabledClass);
\r
99 this.el.removeClass(this.field.disabledClass);
\r
103 doResize: function(w, h){
\r
104 if (typeof w == 'number') {
\r
105 this.el.setWidth(w - this.trigger.getWidth());
\r
107 this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
\r
110 doFocus: function(){
\r
111 if (!this.mimicing) {
\r
112 this.wrap.addClass('x-trigger-wrap-focus');
\r
113 this.mimicing = true;
\r
114 Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
\r
117 this.el.on('keydown', this.checkTab, this);
\r
122 checkTab: function(e){
\r
123 if (e.getKey() == e.TAB) {
\r
124 this.triggerBlur();
\r
129 mimicBlur: function(e){
\r
130 if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
\r
131 this.triggerBlur();
\r
136 triggerBlur: function(){
\r
137 this.mimicing = false;
\r
138 Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
\r
139 this.el.un("keydown", this.checkTab, this);
\r
140 this.field.beforeBlur();
\r
141 this.wrap.removeClass('x-trigger-wrap-focus');
\r
142 this.field.onBlur.call(this.field);
\r
145 initTrigger: function(){
\r
146 this.trigger.addClassOnOver('x-form-trigger-over');
\r
147 this.trigger.addClassOnClick('x-form-trigger-click');
\r
150 initSpinner: function(){
\r
151 this.field.addEvents({
\r
157 this.keyNav = new Ext.KeyNav(this.el, {
\r
159 e.preventDefault();
\r
163 "down": function(e){
\r
164 e.preventDefault();
\r
168 "pageUp": function(e){
\r
169 e.preventDefault();
\r
170 this.onSpinUpAlternate();
\r
173 "pageDown": function(e){
\r
174 e.preventDefault();
\r
175 this.onSpinDownAlternate();
\r
181 this.repeater = new Ext.util.ClickRepeater(this.trigger, {
\r
182 accelerate: this.accelerate
\r
184 this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
\r
185 preventDefault: true
\r
188 this.field.mon(this.trigger, {
\r
189 mouseover: this.onMouseOver,
\r
190 mouseout: this.onMouseOut,
\r
191 mousemove: this.onMouseMove,
\r
192 mousedown: this.onMouseDown,
\r
193 mouseup: this.onMouseUp,
\r
195 preventDefault: true
\r
198 this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
\r
200 this.dd.setXConstraint(0, 0, 10)
\r
201 this.dd.setYConstraint(1500, 1500, 10);
\r
202 this.dd.endDrag = this.endDrag.createDelegate(this);
\r
203 this.dd.startDrag = this.startDrag.createDelegate(this);
\r
204 this.dd.onDrag = this.onDrag.createDelegate(this);
\r
207 onMouseOver: function(){
\r
208 if (this.disabled) {
\r
211 var middle = this.getMiddle();
\r
212 this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
\r
213 this.trigger.addClass(this.tmpHoverClass);
\r
217 onMouseOut: function(){
\r
218 this.trigger.removeClass(this.tmpHoverClass);
\r
222 onMouseMove: function(){
\r
223 if (this.disabled) {
\r
226 var middle = this.getMiddle();
\r
227 if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
\r
228 ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
\r
233 onMouseDown: function(){
\r
234 if (this.disabled) {
\r
237 var middle = this.getMiddle();
\r
238 this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
\r
239 this.trigger.addClass(this.tmpClickClass);
\r
243 onMouseUp: function(){
\r
244 this.trigger.removeClass(this.tmpClickClass);
\r
248 onTriggerClick: function(){
\r
249 if (this.disabled || this.el.dom.readOnly) {
\r
252 var middle = this.getMiddle();
\r
253 var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
\r
254 this['onSpin' + ud]();
\r
258 getMiddle: function(){
\r
259 var t = this.trigger.getTop();
\r
260 var h = this.trigger.getHeight();
\r
261 var middle = t + (h / 2);
\r
266 //checks if control is allowed to spin
\r
267 isSpinnable: function(){
\r
268 if (this.disabled || this.el.dom.readOnly) {
\r
269 Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
\r
275 handleMouseWheel: function(e){
\r
276 //disable scrolling when not focused
\r
277 if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
\r
281 var delta = e.getWheelDelta();
\r
294 startDrag: function(){
\r
296 this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
\r
300 endDrag: function(){
\r
305 onDrag: function(){
\r
306 if (this.disabled) {
\r
309 var y = Ext.fly(this.dd.getDragEl()).getTop();
\r
312 if (this._previousY > y) {
\r
315 if (this._previousY < y) {
\r
319 this['onSpin' + ud]();
\r
322 this._previousY = y;
\r
326 onSpinUp: function(){
\r
327 if (this.isSpinnable() == false) {
\r
330 if (Ext.EventObject.shiftKey == true) {
\r
331 this.onSpinUpAlternate();
\r
335 this.spin(false, false);
\r
337 this.field.fireEvent("spin", this);
\r
338 this.field.fireEvent("spinup", this);
\r
342 onSpinDown: function(){
\r
343 if (this.isSpinnable() == false) {
\r
346 if (Ext.EventObject.shiftKey == true) {
\r
347 this.onSpinDownAlternate();
\r
351 this.spin(true, false);
\r
353 this.field.fireEvent("spin", this);
\r
354 this.field.fireEvent("spindown", this);
\r
358 onSpinUpAlternate: function(){
\r
359 if (this.isSpinnable() == false) {
\r
362 this.spin(false, true);
\r
363 this.field.fireEvent("spin", this);
\r
364 this.field.fireEvent("spinup", this);
\r
368 onSpinDownAlternate: function(){
\r
369 if (this.isSpinnable() == false) {
\r
372 this.spin(true, true);
\r
373 this.field.fireEvent("spin", this);
\r
374 this.field.fireEvent("spindown", this);
\r
377 spin: function(down, alternate){
\r
378 var v = parseFloat(this.field.getValue());
\r
379 var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
\r
380 (down == true) ? v -= incr : v += incr;
\r
382 v = (isNaN(v)) ? this.defaultValue : v;
\r
383 v = this.fixBoundries(v);
\r
384 this.field.setRawValue(v);
\r
387 fixBoundries: function(value){
\r
390 if (this.field.minValue != undefined && v < this.field.minValue) {
\r
391 v = this.field.minValue;
\r
393 if (this.field.maxValue != undefined && v > this.field.maxValue) {
\r
394 v = this.field.maxValue;
\r
397 return this.fixPrecision(v);
\r
401 fixPrecision: function(value){
\r
402 var nan = isNaN(value);
\r
403 if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
\r
404 return nan ? '' : value;
\r
406 return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
\r
409 doDestroy: function(){
\r
410 if (this.trigger) {
\r
411 this.trigger.remove();
\r
414 this.wrap.remove();
\r
415 delete this.field.wrap;
\r
418 if (this.splitter) {
\r
419 this.splitter.remove();
\r
428 this.proxy.remove();
\r
431 if (this.repeater) {
\r
432 this.repeater.purgeListeners();
\r
438 Ext.form.Spinner = Ext.ux.Spinner;