Jak wymusić wyświetlanie dziesiętnych w ExtJS NumberField z określoną dokładnością?

Question

Mam formularz z NumberField, który pobiera wartości typu float z JSON. Jeśli wartości są liczbami całkowitymi, nie są wyświetlane miejsca po przecinku. Chciałbym zawsze pokazać 2 miejsca dziesiętne. Czy istnieje opcja konfiguracji?

Oto moja deklaracja:

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

Answer 1

albo przedłużyć:

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

lub przesłanianie, i że wpłynie wszystkie numberfields w aplikacji:

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

Zauważ skomentowaną sekcję w pierwszej metodzie setValue.

Answer 2

Definicja opcja decimalPrecision jest: „Maksymalna precyzja wyświetlać po separatorze dziesiętnym (domyślnie 2)”

Nie ma opcji, aby wymusić format , prawdopodobnie musisz przesłonić klasę NumberField.

Answer 3

Najlepszym rozwiązaniem jest prawdopodobnie dodanie detektora do zdarzenia rozmycia, a następnie użycie wbudowanej funkcji JavaScript .toFixed (2) na wartości pola.

Answer 4

Popularne rozwiązanie nie działa dla mnie. W rzeczywistości kod w rozwiązaniu jest dokładnym duplikatem kodu źródłowego EXT JS 3.3, który dla mnie wyświetla "1" zamiast "1.00", gdy decimalPrecision wynosi 2. W oparciu o sugestię popularnego rozwiązania, aby zastąpić wartość setValue, to właśnie to zrobiłem:

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

chociaż kod fixPrecision wydaje formatować liczby z żądaną dokładnością, by javascript tracą precyzję podczas manipulacji to robi na dwie linie przed wywołaniem funkcji setValue nadklasy jest. Ustawienie precyzji za pomocą opcji ToFixed, gdy jest ostatecznie konwertowane na ciąg, sprawiło, że działa.

Powodzenia!

Answer 5

Jak to był szczyt wynik na zapytaniu o zmuszanie dziesiętne w NumberField, myślałem, że będzie aktualizować to dla tych korzystających ExtJS 4+

Wejście filtrowanie od ExtJS 4 zostało przekazanych do funkcji valueToRaw, użyta funkcja setValue pochodzi z pola Ext.form.field.Text, więc to właśnie nadpisuję poniżej.

ja również postanowił mieć zmuszając wyświetlanie dziesiętne być opcja („forcePrecision”) konfigurowalny za NumberField, co oznacza, że ​​korekcja będzie wyglądać następująco:

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

Aby to wykorzystać w swojej formie, chcesz instancję to tak:

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

pola nie wystąpienia z forcePrecision: true zachowują się dokładnie tak samo jak domyślne.

Answer 6

jeśli chcesz coś jak poniżej:

wprowadź 50> u mnie 50

50,10> 50,10

50,123> 50.12

Spróbuj tego:

, 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

ten Kod działa doskonale dla mnie. Nie będzie działać bez nadpisania "ValueToRow" w 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 
    }) 

referencyjny: How to keep the trailing zeros in Ext.form.field.Number ?