PDA

View Full Version : Ext.ux.SpinnerPlugin - Plugin for Form Fields (textfield, numberfield, datefield...)



K0bo
9 Jan 2008, 4:07 PM
Plug it to any form field to add 'spinning' functionality!

Grab "SpinnerStrategy.js" from Ext.ux.form.Spinner (http://extjs.com/forum/showthread.php?t=16352) (v0.21 at least) to use it.

Instructions:
Include these two files:


<script type="text/javascript" src="SpinnerPlugin.js"></script>
<script type="text/javascript" src="SpinnerStrategy.js"></script>
Usage:


var tf = new Ext.form.TextField({
plugins: [new Ext.ux.SpinnerPlugin()]
});for a numberfield:


var tf = new Ext.form.NumberField({
plugins: [new Ext.ux.SpinnerPlugin()]
});for a datefield:


var tf = new Ext.form.DateField({
plugins: [new Ext.ux.SpinnerPlugin()]
}); The plugin will automatically set the correct spinning behaviour according to the xtype of the field.

Put the focus on the field and press keyUp/keyDown to see the spinning in action!
For faster spinning press Shift+ keyUp/keyDown or use pageUp/pageDown.

When you need to customize the plugin to a date spinning behavior on a normal textfield ( For example ):


var tf = new Ext.form.TextField({
plugins: [new Ext.ux.SpinnerPlugin({
strategy: new Ext.ux.form.Spinner.DateStrategy({format:"Y-m-d"})
})]
});

orangehairedboy
9 Jan 2008, 4:32 PM
Awesome stuff! Works great!

tof
10 Jan 2008, 3:08 AM
Great !!!

gimbles
11 Jan 2008, 6:20 PM
balls to the wall

galdaka
12 Jan 2008, 12:27 AM
Awesome, Is spinner integrated in Ext 2.1? ;)

linuxtrader
17 Jan 2008, 12:25 PM
My Editor.Grid goes completely away when I use it.

Opera says...


JavaScript - http://dev2/calc/bull.html
Event thread: DOMContentLoaded
Error:
name: TypeError
message: Statement on line 45: Could not convert undefined or null to object
Backtrace:
Line 45 of linked script http://dev2/calc/SpinnerPlugin.js
this.strategy = new Ext.ux.form.Spinner.NumberStrategy(config);
Line 58 of linked script http://dev2/lib/ext-2.0/ext-all.js
B = B || {};
if (B.initialConfig)
else
this.initialConfig = B;
Ext.apply(this, B);
this.addEvents("disable", "enable", "beforeshow", "show", "beforehide", "hide", "beforerender", "render", "beforedestroy", "destroy", "beforestaterestore", "staterestore", "beforestatesave", "statesave");
this.getId();
Ext.ComponentMgr.register(this);

K0bo
28 Jan 2008, 3:59 PM
linuxtrader, I'll look into it.

ray007
10 Jun 2008, 6:50 AM
Added mousewheel handling (stolen from Spinner-field) and some enhanced config.
Didn't yet do any extensive testing, but everything seems to work so far :D



/**
* Ext.ux.SpinnerPlugin.
* URL: http://extjs.com/forum/showthread.php?t=22663
*
* @author Steven Chim
* @version SpinnerPlugin.js 2008-01-10 v0.1
*
* @class Ext.ux.SpinnerPlugin
* @description: Spinner plugin for textfield component (textfield, numberfield, datefield, timefield)
*/

Ext.ux.SpinnerPlugin = function(config) {
Ext.apply(this, config);
};

Ext.ux.SpinnerPlugin.prototype = {

init: function(field) {
this.field = field;

if (field.rendered) {
this.initSpinner();
} else {
field.on('render', this.initSpinner, this, {single:true});
}

if (this.strategy == undefined) {
var xtype = field.getXType();
var config = {};
if (field.spinnerConfig) Ext.apply(config, field.spinnerConfig);

switch (xtype) {
case "datefield":
if (field.format) config.format = field.format;
this.strategy = new Ext.ux.form.Spinner.DateStrategy(config);
break;

case "timefield":
if (field.format) config.format = field.format;
this.strategy = new Ext.ux.form.Spinner.TimeStrategy(config);
break;

case "numberfield":
if (field.maxValue) config.maxValue = field.maxValue;
if (field.minValue) config.minValue = field.minValue;
this.strategy = new Ext.ux.form.Spinner.NumberStrategy(config);
break;

default:
var cf = field.spinnerStrategy || Ext.ux.form.Spinner.NumberStrategy;
this.strategy = new cf(config);
}
}
},

//private
initSpinner: function() {
this.keyNav = new Ext.KeyNav(this.field.getEl(), {
"up": function(e) {
this.onSpinUp(this.field);
},

"down": function(e) {
this.onSpinDown(this.field);
},

"pageUp": function(e) {
this.onSpinUpAlternate(this.field);
},

"pageDown": function(e) {
this.onSpinDownAlternate(this.field);
},

scope: this
});

this.field.wrap.on("mousewheel", this.handleMouseWheel, this);

if (this.strategy == undefined) {
this.strategy = new Ext.ux.form.Spinner.NumberStrategy();
}
},

// private
handleMouseWheel: function(e) {

if (this.field.disabled || this.field.getEl().dom.readOnly) {
Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
return;
}

var delta = e.getWheelDelta();
if(delta > 0){
this.onSpinUp();
e.stopEvent();
} else if(delta < 0){
this.onSpinDown();
e.stopEvent();
}
},

//private
onSpinUp: function() {
if (Ext.EventObject.shiftKey == true) {
this.onSpinUpAlternate();
return;
} else {
this.strategy.onSpinUp(this.field);
}
},

//private
onSpinDown: function() {
if (Ext.EventObject.shiftKey == true) {
this.onSpinDownAlternate();
return;
} else {
this.strategy.onSpinDown(this.field);
}
},

//private
onSpinUpAlternate: function() {
this.strategy.onSpinUpAlternate(this.field);
},

//private
onSpinDownAlternate: function() {
this.strategy.onSpinDownAlternate(this.field);
}

};

mystix
10 Jun 2008, 7:47 AM
@ray007,

i tried your mod without success (included v0.3 of Ext.ux.form.Spinner).

Firebug croaks with the error "this.field.wrap is undefined" on line 78 of your code:


this.field.wrap.on("mousewheel", this.handleMouseWheel, this);

ray007
11 Jun 2008, 1:57 AM
@ray007,

i tried your mod without success (included v0.3 of Ext.ux.form.Spinner).

Firebug croaks with the error "this.field.wrap is undefined" on line 78 of your code:


this.field.wrap.on("mousewheel", this.handleMouseWheel, this);


Strange, all my test-cases here always had the "wrap" element. And I'm also running with FireFox and FireBug ...
And the original Spinner does work for you?

Maybe try to replace 'this.field.wrap' with 'this.field.getEl()' and see if it helps?

mystix
11 Jun 2008, 2:34 AM
yes the original 0.3 Spinner works flawlessly for me.

i merely included

v0.3 of Ext.ux.form.Spinner & Ext.ux.form.Spinner.Strategy
(from http://extjs.com/forum/showthread.php?t=16352) and
your modded SpinnerPlugin


then did the following


Ext.onReady(function() {
new Ext.form.TextField({
renderTo: document.body,
plugins: [new Ext.ux.SpinnerPlugin()]
});
});

and it croaked. swapping TextField for a DateField works.

i think your mod assumes the SpinnerPlugin will only be used in TriggerFields and their descendents (e.g. DateField, TimeField), no?

IIRC, normal Fields don't have this wrap element which your code refers to.

[edit]
the following change should resolve the issue


(this.field.wrap || this.field.getEl()).on("mousewheel", this.handleMouseWheel, this);

note: it's only been tested on a TextField & DateField (which should cover just about everything :-?)

ray007
12 Jun 2008, 2:32 AM
Yeah, I had only used it with DateFields so far - all other instances in our app here so far still use the spinner-field.
Thanks for noticing and fixing :)

K0bo
12 Jun 2008, 6:48 AM
@ ray007 & mystix
Thanks guys. Going to add the scrollwheel support to my svn along with some minor improvements, which I'm going to post soon!

mystix
12 Jun 2008, 6:58 AM
@ ray007 & mystix
Thanks guys. Going to add the scrollwheel support to my svn along with some minor improvements, which I'm going to post soon!

=D>

ray007
12 Jun 2008, 11:46 PM
@ ray007 & mystix
Thanks guys. Going to add the scrollwheel support to my svn along with some minor improvements, which I'm going to post soon!
Is that repo somewhere accessible?

K0bo
14 Jun 2008, 10:58 AM
it's not accessible for the public...

localhost
10 Dec 2008, 10:41 AM
Hello,
Am trying to get the plugin working, but still getting no success :(
So here's my included files in the head:
Css:


- /js/ext-2.2/resources/css/ext-all.css
- /js/ext-2.2/plugins/spinner/Spinner.css

Js:


- ext-2.2/adapter/ext/ext-base.js
- ext-2.2/ext-all-debug.js
- /js/ext-2.2/plugins/spinner/Spinner.js
- /js/ext-2.2/plugins/spinner/SpinnerPlugin.js
- /js/ext-2.2/plugins/spinner/SpinnerStrategy.js

I took the v0.35 of Spinner2 and SpinnerPlugin, here's my NumberField declaration:


var input = new Ext.form.NumberField ({
id : 'caf_input_amount_input',
fieldLabel : 'Amount',
name : 'amount',
allowBlank : false,
decimalPrecision : 2,
allowPureDecimal : true,
allowNegative : false,
minValue : 1,
readOnly : false,
plugins : [new Ext.ux.SpinnerPlugin()],
value : d_amount
});

All i get is a simple input just like if i didnt add that plugin, there's no spinning buttons, although the plugins libs are fully loaded (from firebug console) and, dont think i got a cache problem /:) :)

Can you please help me ?

Thanks

localhost
11 Dec 2008, 11:58 AM
Am style freezed with this 8-|
Anyone ?

Joyce
3 Jun 2009, 12:39 PM
Hello,
Am trying to get the plugin working, but still getting no success :(
So here's my included files in the head:
Css:


- /js/ext-2.2/resources/css/ext-all.css
- /js/ext-2.2/plugins/spinner/Spinner.css

Js:


- ext-2.2/adapter/ext/ext-base.js
- ext-2.2/ext-all-debug.js
- /js/ext-2.2/plugins/spinner/Spinner.js
- /js/ext-2.2/plugins/spinner/SpinnerPlugin.js
- /js/ext-2.2/plugins/spinner/SpinnerStrategy.js

I took the v0.35 of Spinner2 and SpinnerPlugin, here's my NumberField declaration:


var input = new Ext.form.NumberField ({
id : 'caf_input_amount_input',
fieldLabel : 'Amount',
name : 'amount',
allowBlank : false,
decimalPrecision : 2,
allowPureDecimal : true,
allowNegative : false,
minValue : 1,
readOnly : false,
plugins : [new Ext.ux.SpinnerPlugin()],
value : d_amount
});

All i get is a simple input just like if i didnt add that plugin, there's no spinning buttons, although the plugins libs are fully loaded (from firebug console) and, dont think i got a cache problem /:) :)

Can you please help me ?

Thanks

I am having the same issue...

moegal
8 Jun 2009, 5:24 AM
me too. Anyone get this working as a plugin?

Marty

tfeldkamp
6 Oct 2009, 4:33 PM
Awesome plugin - got it working in an editorgridpanel - one fix I needed to make was for a max or min value of zero - it wasn't working correctly until I made the following fix!

case "numberfield":
if (field.maxValue || field.maxValue === 0) config.maxValue = field.maxValue;
if (field.minValue || field.minValue === 0) config.minValue = field.minValue;