Come si impone la visualizzazione di un decimale in un campo numerico ExtJS con una certa precisione?

Question

Ho un modulo con un NumberField che ottiene valori di tipo float da JSON. Se i valori sono numeri interi, non vengono visualizzati i decimali. Mi piacerebbe mostrare 2 cifre decimali in ogni momento. C'è un'opzione di configurazione per questo?

Ecco la mia dichiarazione:

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

Answer 1

sia estendono:

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

EDIT

Si noti la sezione commentata nel primo metodo setValue.

Answer 2

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

Non v'è alcuna opzione per forzare il formato , devi probabilmente sostituire la classe NumberField.

Answer 3

La migliore scommessa è probabilmente aggiungere un listener all'evento di sfocatura per esso, quindi utilizzare la funzione JavaScript incorporata .toFixed (2) sul valore del campo.

Answer 4

La soluzione popolare non ha funzionato per me. Infatti 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. Sulla base del 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 perderebbero la precisione durante la manipolazione lo fa sulle due linee prima della chiamata alla funzione setValue della superclasse. Impostando la precisione con toFixed quando viene finalmente convertito in una stringa, ha funzionato.

Buona fortuna!

Answer 5

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

Il filtraggio dell'ingresso dal ExtJS 4 è stato delegato ad una funzione valueToRaw, la funzione setValue utilizzata è in realtà da Ext.form.field.Text, quindi è quello che sto sovrascrivendo qui sotto.

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 utilizzare questo modulo, avresti un'istanza in questo modo:

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

campi non istanziati con forcePrecision: vero si comportano esattamente come il default.

Answer 6

se si vuole qualcosa di simile di seguito:

immettere 50> u ha ottenuto il 50

50.10> 50.10

50,123> 50.12

Prova questa:

, 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 il codice funziona alla grande per me. 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: How to keep the trailing zeros in Ext.form.field.Number ?