如何强制ExtJS NumberField中的小数显示达到一定的精度？

Question

我有一个表单,从JSON NumberField获取类型的值float.如果值恰好是整数,则不显示小数位.我想一直显示2位小数.这有配置选项吗？

这是我的声明:

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

Answer 1

由于这是关于在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的行为与默认值完全相同.

Answer 2

流行的解决方案对我不起作用.事实上,解决方案中的代码与EXT JS 3.3源代码完全相同,对于我来说,当decimalPrecision为2时,显示"1"而不是"1.00".根据流行解决方案的建议来覆盖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函数之前在两行上操作时失去精度.在最终转换为String时使用toFixed设置精度使其工作.

祝好运!

Answer 3

无论是扩展:

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方法中的注释部分.