Как заставить отображение десятичного числа в ExtJS NumberField с определенной точностью?

Question

У меня есть форма с NumberField, которая получает значения типа float от JSON. Если значения являются целыми числами, то десятичные числа не отображаются. Я бы хотел показать 2 десятичных знака во все времена. Есть ли опция конфигурации для этого?

Вот мое заявление:

items: [ 
    { 
     fieldLabel: 'Net Sales', 
     name: 'netSales', 
     allowBlank:false, 
     decimalPrecision:2 
    }, 

Answer 1

либо продлить:

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 
    }), 

или переопределение, и это будет влиять на все numberfields в приложении:

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 
    }, 

EDIT

Обратите внимание на раздел с комментариями в первом методе setValue.

Answer 2

Определение опции decimalPrecision является: «Максимальная точность для отображения после десятичного разделителя (по умолчанию 2)»

Там нет возможности заставить формат , вы, вероятно, должны переопределить класс NumberField.

Answer 3

Лучшая ставка - это, вероятно, добавить слушателя к событию размытия для него, а затем использовать встроенную функцию Javascript .toFixed (2) для значения поля.

Answer 4

Популярное решение не работает для меня. На самом деле код в решении является точным дубликатом исходного кода 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 кажется форматировать число с требуемой точностью, яваскрипт потеряет точность во время манипуляций она делает на два строк перед вызовом функции SetValue суперкласса. Установка точности с помощью toFixed, когда она окончательно преобразована в String, заставила ее работать.

Удачи вам!

Answer 5

Поскольку это был первый результат для поискового запроса о принудительном десятичные в 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: истинно ведут себя так же, как по умолчанию.

Answer 6

если вы хотите что-то, как показано ниже:

введите 50> и получил 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); 
} 

Answer 7

Этот код отлично работает для меня. Он не будет работать с переопределением 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 
    }) 

Ссылка: How to keep the trailing zeros in Ext.form.field.Number ?