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

Ответ 1

либо 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.

Ответ 2

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

Ответ 3

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

Удачи!

Ответ 4

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

Ответ 5

Параметр decimalPrecision: "Максимальная точность отображения после десятичного разделителя (по умолчанию - 2)"

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

Ответ 6

если вы хотите что-то вроде ниже:

введите 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);
}

Ответ 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
    })

Ссылка: Как сохранить конечные нули в Ext.form.field.Number?