PDA

View Full Version : numberfield with starting value



gabrikid
21 Feb 2014, 6:18 AM
hi.

lets say that i have a numberfield.

if the field is empty, and i press the increment trigger, it will assume some value. is there any way to define that starting value?

the thing is, my numberfield has a minValue, but i dont want to start from the minValue. the purpose of this numberfield, is to start from some other value, and increment or decrement from that value.

gabrikid
21 Feb 2014, 6:20 AM
by the way, i forgot to mention that i'm using sencha extjs 4.1.0

scottmartin
21 Feb 2014, 12:26 PM
You could override the spinner class to do something like:



Ext.define('Ext.ux.CustomSpinner', {
extend: 'Ext.form.field.Spinner',
alias: 'widget.customspinner',

onSpinUp: function() {
var me = this,
val = me.getValue();

if (val == '') {
me.setValue(20); // start at 20
} else {
me.setValue(parseInt(val) + me.step);
}
}
});

Ext.application({
name: 'Fiddle',

launch: function() {
var form = Ext.create('Ext.form.Panel', {
title: 'On The Wall',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'customspinner',
anchor: '100%',
name: 'bottles',
fieldLabel: 'Bottles of Beer',
// value: 99,
step: 1,
maxValue: 99,
minValue: 10
}]

});
}
});

scottmartin
21 Feb 2014, 1:02 PM
To use the numberfield as you have it, you can use


Ext.define('Ext.ux.CustomNumber', {
extend: 'Ext.form.field.Number',
alias: 'widget.customnumber',

onSpinUp: function() {
var me = this,
val = me.getValue();

if (val === null) {
me.setValue(20); // start at 20
} else {
me.setValue(parseInt(val) + me.step);
}
}
});

gabrikid
25 Feb 2014, 7:00 AM
hi. thanks for your support.

by the way, i would like to ask you something else. on extjs 4.1.0, if i change the readonly property on a numberfield, it is supposed that extjs hide and show the triggers? the thing is, when i make it readonly true from the start, the triggers will never be shown, even after i set the readonly to false.

scottmartin
25 Feb 2014, 7:13 AM
You would need to use a method to change a config at runtime.

field.setReadOnly(false);

gabrikid
25 Feb 2014, 8:01 AM
i use that function to set the readonly. but once it starts as readonly: true, when i change that property with setReadOnly, the trigger will never be shown.
i also tried to configure the numberfield with readOnly: true, hideTrigger: false.

scottmartin
25 Feb 2014, 8:06 AM
This seems to be 'feature' of 4.1.0.

You can paste this code in our fiddle and test the different versions:
https://fiddle.sencha.com/#home

The following works in 4.1.1+


Ext.application({
name: 'Fiddle',

launch: function() {
Ext.create('Ext.form.Panel', {
title: 'On The Wall',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'numberfield',
anchor: '100%',
name: 'bottles',
fieldLabel: 'Bottles of Beer',
value: 99,
maxValue: 99,
minValue: 0,
readOnly: true
}],
buttons: [{
text: 'Set Read Only',
handler: function() {
this.up('form').down('[name=bottles]').setReadOnly(false);
}
}]
});
}
});

gabrikid
25 Feb 2014, 8:18 AM
hum, you are right.

thanks for all the support (:

best regards,
Gabriel.