Wie kann ich erzwingen die Anzeige der dezimal-in eine ExtJS NumberField, um eine gewisse Genauigkeit?

Ich habe ein Formular mit einem NumberField bekommt Werte vom Typ float von JSON. Wenn die Werte zufällig ganze zahlen, dann werden keine Dezimalstellen angezeigt werden. Ich möchte zeigen, auf 2 Dezimalstellen zu allen Zeiten. Gibt es eine config-option für diese?

Hier ist meine Erklärung:

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

InformationsquelleAutor der Frage Mike Sickler | 2009-08-17

entweder erweitern :

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

oder überschreibenund das wird Wirkung alle numberfields in Ihrer Anwendung:

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

BEARBEITEN

Beachten Sie den auskommentierten Abschnitt in der ersten setValue-Methode.

InformationsquelleAutor der Antwort Joshua

Da dies das top-Ergebnis für eine Suchanfrage zum erzwingen von Dezimalzahlen in ein NumberField, dachte, ich würde die Aktualisierung für diejenigen, die sich mit ExtJS 4+

Den input-filtern, da ExtJS 4 übertragen worden ist, um eine valueToRaw Funktion, die setValue-Funktion verwendet, ist eigentlich von Ext.form.Feld.Text, so dass ist, was ich bin übergeordnete unten.

Ich habe auch beschlossen zu haben, die durch die Anzeige von Nachkommastellen um eine option ('forcePrecision') konfigurierbar pro NumberField, was bedeutet, dass das überschreiben wird wie folgt Aussehen:

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

Verwenden Sie diese in Ihrer form, würde Sie instanziieren Sie es wie folgt:

{
  xtype: 'numberfield',
  name:  'decimalsfield',
  forcePrecision: true,     #defaults to false
  decimalPrecision: 3       #defaults to 2
}

Felder, die nicht instanziiert mit forcePrecision: true Verhalten sich genauso wie die Standard.

InformationsquelleAutor der Antwort Dave A

11

Die beliebte Lösung für mich nicht funktioniert. In der Tat ist der code für die Lösung ist eine exakte Kopie von EXT JS 3.3 source code, die, für mich, "1" anzeigt anstelle von "1.00", wenn decimalPrecision ist 2. Basierend auf der beliebten Lösung ' s Vorschlag zu überschreiben, setValue, das ist, was ich getan habe:
```
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);
    }
});
```
Obwohl die fixPrecision code scheint formatieren Sie die Zahl mit der gewünschten Präzision, javascript verlieren würde die Präzision bei der manipulation auf die beiden Zeilen vor dem Aufruf des superclass-die setValue Funktion. Die Einstellung der Präzision mit toFixed wenn es schließlich in einen String konvertiert, funktionierte es.

Glück!

InformationsquelleAutor der Antwort Jens
1

Beste Wette ist wahrscheinlich, um einen listener hinzufügen blur-event für Sie, und verwenden Sie dann errichtet in Javascript .toFixed(2) - Funktion auf den Wert des Feldes.

InformationsquelleAutor der Antwort Jason
0

Die option decimalPrecision definition ist:
"Die maximale Genauigkeit anzeigen, die nach dem Dezimaltrennzeichen (standardmäßig 2)"

Gibt es keine option um zu erzwingen das format, die Sie auf bestem Wege begraben zu überschreiben NumberField Klasse.

InformationsquelleAutor der Antwort Davide Ungari

wenn Sie wollen, so etwas wie unten:

geben Sie 50 > u bekam 50

50.10 > 50.10

50.123 > 50.12

Versuchen Sie dies:

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

InformationsquelleAutor der Antwort Umang

Dieser code funktioniert Super für mich. Es wird nicht funktionieren mit der "ValueToRow" override in 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
    })

Referenz:
Zu halten, wie die nachfolgende Nullen in Ext.form.Feld.Anzahl ?

InformationsquelleAutor der Antwort Nuwa

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.