Come posso forzare la visualizzazione di un decimale in un ExtJS NumberField con una certa precisione?

Question

Ho un modulo con a NumberField che ottiene valori di tipo float da JSON.Se i valori sono numeri interi, non vengono visualizzate le cifre decimali.Vorrei mostrare sempre 2 cifre decimali.Esiste un'opzione di configurazione per questo?

Ecco la mia dichiarazione:

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

Answer 1

estendere :

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

o di override , e che effettuerà tutti NumberFields nell'applicazione:

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

Modifica

Si noti la sezione commentata nel primo metodo setValue.

Answer 2

Dato che questo è stato il risultato superiore per una query di ricerca su forzando decimali in un NumberField, ho pensato di aggiornare questo per coloro che utilizzano ExtJS 4 +

L'ingresso filtraggio dal ExtJS 4 è stata delegata a una funzione valueToRaw, la funzione setValue utilizzato è in realtà da Ext.form.field.Text, in modo che è quello che sto ignorando qui di seguito.

Ho anche deciso di avere la forzatura di visualizzare decimali essere un'opzione ( 'forcePrecision') configurabile per NumberField, il che significa che la sostituzione sarà simile a questa:

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

Per usare questo modulo, si sarebbe un'istanza in questo modo:

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

I campi non istanziato con forcePrecision:. True si comportano esattamente come il default

Answer 3

La soluzione popolare non ha funzionato per me.In effetti, il codice nella soluzione è un duplicato esatto del codice sorgente EXT JS 3.3 che, per me, visualizza "1" invece di "1.00" quando decimalPrecision è 2.Basandomi sul suggerimento della soluzione popolare di sovrascrivere setValue, questo è ciò che ho fatto:

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

Anche se il codice fixPrecision sembra formattare il numero con la precisione desiderata, javascript perderebbe la precisione durante la manipolazione che fa sulle due righe prima della chiamata alla funzione setValue della superclasse.L'impostazione della precisione con toFixed quando viene finalmente convertito in una stringa lo ha fatto funzionare.

Buona fortuna!

Answer 4

La cosa migliore è probabilmente quello di aggiungere un listener per l'evento sfocatura per esso, e quindi utilizzare il costruito nel (2) funzione Javascript .toFixed sul valore del campo.

Answer 5

La definizione opzione decimalPrecision è: "La precisione massima da visualizzare dopo il separatore decimale (default 2)"

Non v'è alcuna opzione per forzare il formato, dovete problably ignorare classe NumberField.

Answer 6

se si desidera qualcosa di simile di seguito:

Inserire 50> u ha ottenuto 50

50.10> 50.10

50,123> 50.12

Prova questo:

, 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

Questo codice funziona grande per me. Esso non funzionerà con l'override "ValueToRow" 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
    })

Riferimento: Come mantenere gli zeri finali in Ext.form. field.Number?