PDA

View Full Version : Aout NmberField format



telo.tao.yang
3 Aug 2012, 6:59 PM
How can i format a numberfield in form
for example, i want to keep 2 decimal, 7 will show as 7.00, 10.1 will show as 10.10.
but now, numberfield won't show last zero, 7 show as 7 other than 7.00
thanks.

mitchellsimoens
4 Aug 2012, 7:34 PM
What framework and version?

telo.tao.yang
5 Aug 2012, 8:17 AM
It's extjs4.1.1.

sword-it
6 Aug 2012, 2:22 AM
Hi telo.tao.yang,
To have formatted value in your number field, you should use 'blur' event to the numberfield. Review the following code :




{
xtype: 'numberfield',
listeners: {
blur: function(){
var value = this.getValue(); // getting the value of numberfield
value = parseFloat(value).toFixed(2); // formatting the value
this.setRawValue(value); // setting the formatted value.
}
}
}

telo.tao.yang
6 Aug 2012, 9:03 AM
Thanks for your patient answer.

yes, listen 'blur' event can format the numberfield, but if i just put a few numberfield on a formpanel, how can format it , it just show, not trigger blur event. which event i should listen?

there a gridpanel and a formpanel in my project, i click one row in my grid, then create formpanel, and pass record to formpanel ,then call formpanel.show(). at this moment, have not trigger blue event, and how to format numberfield?

telo.tao.yang
6 Aug 2012, 9:35 AM
and now , i use below code to format:


Ext.define('Ext.form.field.Number2', {
extend:'Ext.form.field.Number',
alias: 'widget.numberfield2',

setValue : function(value){
value = parseFloat(value).toFixed(2);
this.setRawValue(value);
}
});

this time ,i can format the number to 2 decimal.but i want to format as 123,456.10.
so i user Ext.util.Format.number(value,'0,000.00') to format,first time is ok, it show 123,456.10, but if i click the numberfield, it change to 123.00.
i think, i was because of ","
how can i handle this? thanks.

sword-it
6 Aug 2012, 11:40 PM
hello,
To add format to the numberfield on setValue(), blur event & focus event, review the following code:


{
xtype: 'numberfield'
, invalidCls: '' // to remove the invalid class
, setValue: function (value) {
value = Ext.util.Format.number(value, '0,000.00');
this.setRawValue(value);
}
, listeners: {
focus: function (field) {
var value = field.getRawValue()
, result = '';
// below loop remove the comma (,) from the numberfield
for (var i = 0, total = value.length; i < total; i++) {
if (value.charAt(i) != ',') {
result += value.charAt(i);
}
}
field.setRawValue(result);
},
blur: function (field) {
var value = field.getRawValue()
, result = '';
for (var i = 0, total = value.length; i < total; i++) {
if (value.charAt(i) != ',') {
result += value.charAt(i);
}
}
result = Ext.util.Format.number(result, '0,000.00');
field.setRawValue(result);
}
}
}