[2.0] Ext.ux.form.Spinner

[K0bo]

Presenting the spinner control for extjs 2.0.

Made some small changes on the 1.1.x version to make it work with ExtJS 2.0
Make sure to remove the Spinner from ExtJS v1.1 as it conflicts with the one for ExtJS v2.0

demo: http://members.upc.nl/j.chim/ext/spi...t-spinner.html

Usage:

Create a new Spinner control with number spinning as default:

var spinner = new Ext.ux.form.Spinner();
spinner.applyToMarkup('existingInputText');

New spinner. Initial value 10; Set it to a number spinner with min- and max value and custom increments.

var spinner = new Ext.ux.form.Spinner({
    value: 10,
    strategy: new Ext.ux.form.Spinner.NumberStrategy({minValue:0, maxValue:100, incrementValue:5, alternateIncrementValue:10})
});
spinner.applyToMarkup('existingInputText');

New spinner. Set spinner to a time spinner.

var spinner = new Ext.ux.form.Spinner({
    strategy: new Ext.ux.form.Spinner.TimeStrategy()
});
spinner.applyToMarkup('existingInputText');

New spinner. Set spinner to a date spinner with custom date format.
See this page for more formats. Applies to TimeSpinner too.

var spinner = new Ext.ux.form.Spinner({
    strategy: new Ext.ux.form.Spinner.DateStrategy({format:'Y-m-d'})
});
spinner.applyToMarkup('existingInputText');

As of version 0.3 it's possible to pass strategy config in constructor. See post.
supported 'xtype': [number, date, time]

var spinner = new Ext.ux.form.Spinner({
    strategy:{
         xtype:'number'
        ,minValue:0
        ,maxValue:100
    }
    ,name:'mySpinner'
    // ...
});

Updates:
-- 2008-08-27 (v0.35) --
[changed] - disable scrolling when field is not focused, preventing accidental scrolling
[added] - validation-call after spinning, with small delay (buffered)
[fixed] - double spinning bug. thanks vtswingkid! [post]
[fixed] - spinner still working when disabled
[added] - generic spin event, for spinning up and down

-- 2008-05-08 (v0.3) --
[added] - new event 'spin', which fires after spinning up or down
[fixed] - prevent pagescroll upon pageup/down event in Opera
[fixed] - invalid date/time formatting. patch by almostchristian's. [post]
[added] - jsakalos patch, enabling passing strategy config in constructor. [post]
[fixed] - Spinning while Spinner is set to readOnly or disabled
[added] - Releasing plugin under BSD-license

-- 2008-01-10 (v0.21) --
[fixed] - Minor changes to SpinnerStrategy.js to make it work with the SpinnerPlugin

-- 2008-01-04 (v0.2) --
[fixed] - spinning twice onclick
[added] - registered xtype: "uxspinner"
[added] - precision attributes for numberstrategy (allowDecimals & decimalPrecision)

Ideas
- smartspin option for number- and date strategy

[galdaka]

Excellent work!!

Thanks for share,

[Grimsk]

Well Done

[brian.moeskau]

It would be really cool if you could show an example using TwinTriggerField (it's an undocumented example, but for fields that also have a natural selection mechanism like date and time it seems like it would be really useful -- see http://extjs.com/deploy/dev/examples/form/custom.html). That way you can use the picker to move in large leaps, or the spinner to move in small increments.

EDIT: The TwinTriggerField class iteself is in the TriggerField.js file at the bottom.

[Animal]

TriggerField already sets up a click listener on the trigger to call onTriggerClick. That's where the extra event is coming from.

ClickRepeater only fires click events during the time the mouse is down. A down and then an up will fire the TriggerField's native click handler. You'll have to remove that first.

[cybershield]

I haven't test it thoroughly, so far everything works fine, except for clicking up and down. It will fire the spinning twice... on mousedown and mouseup
My guess so far is that it has something to do with the ClickRepeater...
Does anyone have an solution for the problem?

Add

this.trigger.un("click", this.onTriggerClick);

before

this.repeater = new Ext.util.ClickRepeater(this.trigger.dom);
this.repeater.on("click", this.onTriggerClick, this, {preventDefault:true});

The spinner control don't validate the value when click the arrow, you can add into mouseup event the validate check:

	onMouseUp : function() {
		this.trigger.removeClass(this.__tmpccls);
		this.validate();      // check value
	},

Good work K0bo

Ciao

[jo2008]

I applied the last fix and the clicks on the arrows work now. But another problem has been created through this:

If you click in the spinner textfield so that the cursor appears and then click on the down arrow, the value is increased instead of decreased.

In the original version before the twin trigger thing, this effect was reversed by the second event.

Maybe we have to use the other event to prevent this from happening.

[dafimoto]

I've noticed that when using firefox 2.0 and putting spinner into a small column width 65px with spinner's width of 55px it will show up a horizontal scrollbar on bottom.

After examining this issue with firebug i've noticed a left:79px statement in the generated style for the proxy element.
This was probably because the splitter was set to the right using setRight ....

the correction i've made was:

this.proxy.setStyle('left','0px'); 

and the scrollbar was gone.

Best regards,
Bogdan

[cutigersfan]

I've put spinners in several panels of an accordian layout. The panel that displays openly by default has all spinners looking fine. However the ones that are closed by default have the splitter image placed to the left of the textbox.

It appears that it's due to the wrap with being set to 0. It doesn't matter if a width is specified or not.

Anyone else tried this?

[mdissel]

Thanks for sharing, when i do a single click on the button the number is de/incremented with 2. Is that correct?