Ext Spinner Widget - Go to forum

Spinner applied to textfield

Hold Shift for alternate spinning

Form

Textfield plugin

New spinner. Defaults to a number spinner

var s = new Ext.ux.form.Spinner();
s.applyToMarkup('t');

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

var s = new Ext.ux.form.Spinner({
	value: 10,
	strategy: new Ext.ux.form.Spinner.NumberStrategy({minValue:0, maxValue:20})
});
s.applyToMarkup('t');

New spinner. Set spinner to a date spinner

var s = new Ext.ux.form.Spinner({
	strategy: new Ext.ux.form.Spinner.DateStrategy()
});
s.applyToMarkup('t');

Create your own spin strategies, by extending the Ext.ux.form.Spinner.Strategy class
For example a time spinner: 

Ext.ux.form.Spinner.TimeStrategy = function(config){
	Ext.ux.form.Spinner.TimeStrategy.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.form.Spinner.TimeStrategy, Ext.ux.form.Spinner.DateStrategy, {
	format : "H:i",
	incrementValue : 1,
	incrementConstant : Date.MINUTE,
	alternateIncrementValue : 1,
	alternateIncrementConstant : Date.HOUR

/*
	spin : function(field, down, alternate){
		Ext.ux.form.Spinner.TimeStrategy.superclass.spin.call(this);
		
		//extend this class. (no need to extend for time strategy)
	}
*/
});