Comment puis-je forcer l'affichage d'une virgule dans un ExtJS Champnombre à une certaine précision?

J'ai un formulaire avec un NumberField qui obtient des valeurs de type float de JSON. Si les valeurs se trouvent être des nombres entiers, alors pas de décimales sont affichés. Je voudrais montrer 2 décimales à tout moment. Est-il une option de configuration pour cela?

Voici ma déclaration:

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

OriginalL'auteur Mike Sickler | 2009-08-17

soit étendre :

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

ou remplacer, et que l'effet de tous les numberfields dans votre application:

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

MODIFIER

Avis de la section commentée dans la première méthode setValue.

J'ai essayé votre remplacement, et il fonctionne très bien sur un événement de changement. Toutefois, lors du premier chargement du formulaire de données à partir d'un JsonStore, fixPrecision n'est pas appelé. Est-il un moyen de le déclencher?
Faire une JsonReader, pas un JsonStore...
marquer comme "réponse"? 🙂
A travaillé comme un charme, Joshua. Merci!

OriginalL'auteur Joshua

Comme ce fut le meilleur résultat pour une requête de recherche au sujet de forcer les décimales dans un Champnombre, pensé que je voudrais mettre à jour cette pour ceux qui utilisent ExtJS 4+

Le filtrage d'entrée depuis ExtJS 4 a été déléguée à un valueToRaw fonction, la fonction setValue utilisé est en fait à partir Ext.forme.champ.Texte, de sorte que c'est ce que je suis primordial ci-dessous.

J'ai aussi décidé de le forcer l'affichage des décimales pour être une option ('forcePrecision') configurable par Champnombre, ce qui signifie que le correcteur va ressembler à ceci:

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

L'utiliser dans votre formulaire, vous souhaitez instancier comme ceci:

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

Des champs n'est pas instancié avec forcePrecision: true se comportent exactement comme la valeur par défaut.

OriginalL'auteur Dave A

11

La solution populaire n'a pas fonctionné pour moi. En fait le code dans la solution est une copie exacte de l'EXT JS 3.3 code source qui, pour moi, l'affiche "1" au lieu de "1.00" quand decimalPrecision est 2. Basé sur la populaire solution la suggestion de remplacer setValue, c'est ce que j'ai fait:
```
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);
    }
});
```
Même si le fixPrecision code semble format le avec la précision souhaitée, javascript serait perdre de la précision lors de la manipulation sur les deux lignes avant l'appel à la super-classe de la fonction setValue. Réglage de la précision avec toFixed quand il est finalement convertie en une Chaîne de le faire fonctionner.

Bonne chance!

OriginalL'auteur Jens
1

Meilleur pari est probablement pour ajouter un écouteur pour le flou de l'événement pour elle, puis utiliser le construit en Javascript .toFixed(2) fonction de la valeur du champ.

OriginalL'auteur Jason
0

L'option decimalPrecision définition est la suivante:
"Le maximum de précision de l'affichage après le séparateur décimal (par défaut 2)"

Il n'y a pas d'option pour forcer le format, vous avez probablement besoin de surcharger Champnombre classe.

OriginalL'auteur Davide Ungari

si vous voulez quelque chose comme ci-dessous:

entrez 50 > u got 50

50.10 > 50.10

50.123 > 50.12

Essayez ceci:

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

OriginalL'auteur Umang

Ce code fonctionne très bien pour moi. Il l'habitude de travailler avec les "ValueToRow" remplacer dans 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
})

De référence:
Comment garder les zéros de fin de Poste.forme.champ.Nombre ?

OriginalL'auteur Nuwa

Vous devez vous connecter pour publier un commentaire.