У меня есть форма с NumberField, которая получает значения типа float от JSON. Если значения являются целыми числами, то десятичные числа не отображаются. Я бы хотел показать 2 десятичных знака во все времена. Есть ли опция конфигурации для этого?
Здесь мое выражение:
items: [
{
fieldLabel: 'Net Sales',
name: 'netSales',
allowBlank:false,
decimalPrecision:2
},
либо expand:
var myNumberField = Ext.extend(Ext.form.NumberField, {
setValue : function(v){
v = typeof v == 'number' ? v : String(v).replace(this.decimalSeparator, ".");
v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
// if you want to ensure that the values being set on the field is also forced to the required number of decimal places.
// (not extensively tested)
// v = isNaN(v) ? '' : this.fixPrecision(String(v).replace(".", this.decimalSeparator));
return Ext.form.NumberField.superclass.setValue.call(this, v);
},
fixPrecision : function(value){
var nan = isNaN(value);
if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
return nan ? '' : value;
}
return parseFloat(value).toFixed(this.decimalPrecision);
}
});
...
...
items: [new myNumberField({
id : 'net',
fieldLabel: 'Net Sales',
allowBlank:false,
decimalPrecision:2
}),
или переопределить, и это повлияет на все числовые поля в вашем приложении:
Ext.override(Ext.form.NumberField, {
setValue : function(v){
v = typeof v == 'number' ? v : String(v).replace(this.decimalSeparator, ".");
v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
return Ext.form.NumberField.superclass.setValue.call(this, v);
},
fixPrecision : function(value){
var nan = isNaN(value);
if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
return nan ? '' : value;
}
return parseFloat(value).toFixed(this.decimalPrecision);
}
})
items: [{
xtype : 'numberfield',
fieldLabel: 'Net Sales',
allowBlank:false,
decimalPrecision:2
},
ИЗМЕНИТЬ
Обратите внимание на раздел с комментариями в первом методе setValue.
Поскольку это был лучший результат для поискового запроса о форсировании десятичных знаков в NumberField, я подумал, что обновляю его для тех, кто использует ExtJS 4 +
Вводная фильтрация, поскольку ExtJS 4 была делегирована функции valueToRaw, используемая функция setValue на самом деле из Ext.form.field.Text, так что я ниже переопределяю.
Я также решил, что форсирование отображения десятичных знаков является опцией ( "forcePrecision" ), настраиваемой на NumberField, что означает, что переопределение будет выглядеть следующим образом:
Ext.override(Ext.form.NumberField, {
forcePrecision : false,
valueToRaw: function(value) {
var me = this,
decimalSeparator = me.decimalSeparator;
value = me.parseValue(value);
value = me.fixPrecision(value);
value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
if (isNaN(value))
{
value = '';
} else {
value = me.forcePrecision ? value.toFixed(me.decimalPrecision) : parseFloat(value);
value = String(value).replace(".", decimalSeparator);
}
return value;
}
});
Чтобы использовать это в своей форме, вы должны создавать его следующим образом:
{
xtype: 'numberfield',
name: 'decimalsfield',
forcePrecision: true, #defaults to false
decimalPrecision: 3 #defaults to 2
}
Поля, не создаваемые с помощью forcePrecision: true, ведут себя точно так же, как и по умолчанию.
Популярное решение для меня не сработало. На самом деле код в решении является точным дубликатом исходного кода EXT JS 3.3, который для меня отображает "1" вместо "1.00", когда decimalPrecision равно 2. На основе популярного решения для переопределения setValue это то, что Я сделал:
Ext.override(Ext.form.NumberField, {
setValue: function(v) {
var dp = this.decimalPrecision;
if (dp < 0 || !this.allowDecimals) {
dp = 0;
}
v = this.fixPrecision(v);
v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
v = isNaN(v) ? '' : String(v.toFixed(dp)).replace(".", this.decimalSeparator);
return Ext.form.NumberField.superclass.setValue.call(this, v);
}
});
Несмотря на то, что код fixPrecision, по-видимому, форматирует число с нужной точностью, javascript потеряет точность во время манипуляции с двумя строками перед вызовом функции суперкласса setValue. Установка точности с помощью toFixed, когда она окончательно преобразуется в String, заставила ее работать.
Удачи!
Лучшая ставка - это, вероятно, добавить слушателя к событию размытия для него, а затем использовать встроенную функцию Javascript.toFixed(2) для значения поля.
Параметр decimalPrecision: "Максимальная точность отображения после десятичного разделителя (по умолчанию - 2)"
Нет необходимости форматировать формат, вы, вероятно, должны переопределить класс NumberField.
если вы хотите что-то вроде ниже:
введите 50 > u получил 50
50.10 > 50.10
50.123 > 50.12
Попробуйте следующее:
, setValue: function (v) {
if ( !v || isNaN(v)) {
v = '';
}
else if (v % 1 != 0) { //means number is not whole number
v = this.fixPrecision(String(v).replace(".", this.decimalSeparator));
}
return Ext.form.NumberField.superclass.setValue.call(this, v);
}
, fixPrecision: function (value) {
if (!this.allowDecimals || this.decimalPrecision == -1) {
return value;
}
return parseFloat(value).toFixed(this.decimalPrecision);
}
Этот код отлично работает для меня. Он не будет работать с переопределением ValueToRow в ExtJS 4.2.0.
var myNumberField = Ext.extend(Ext.form.NumberField, {
setValue : function(v){
v = typeof v == 'number' ? v : String(v).replace(this.decimalSeparator, ".");
v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
return Ext.form.NumberField.superclass.setValue.call(this, v);
},
fixPrecision : function(value){
var nan = isNaN(value);
if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
return nan ? '' : value;
}
var val = parseFloat(value).toFixed(this.decimalPrecision);
return val;
},
valueToRaw: function(value) {
var me = this,
decimalSeparator = me.decimalSeparator;
value = me.parseValue(value);
value = me.fixPrecision(value);
value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
value = isNaN(value) ? '' : String(value).replace('.', decimalSeparator);
return me.fixPrecision(value);
}
});
...
...
items: [new myNumberField({
id : 'net',
fieldLabel: 'Net Sales',
allowBlank:false,
decimalPrecision:2
})
Ссылка: Как сохранить конечные нули в Ext.form.field.Number?