如何强制小数的显示在一个ExtJS NumberField一定的精度？

Question

我有与获取从JSON类型NumberField的值的float的形式。如果值正好是整数，则没有小数位显示。我想显示在任何时候都保留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
    },

<强> 修改

注意在第一setValue方法的注释部分。

Answer 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：真的完全一样的默认

Answer 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精度时，它最终转换为字符串使它工作。

祝你好运！

Answer 4

最好的办法可能是一个监听器添加到它的模糊事件，然后使用内置在Javascript .toFixed（2）函数的字段的值。

Answer 5

选项decimalPrecision定义是： “最大精度小数分隔符后显示（默认为2）”

有没有选项可以强制格式，你problably必须覆盖NumberField类。

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

参考： 如何保持Ext.form尾随零。 field.Number？