Comment puis-je forcer l'affichage d'une décimale dans un ExtJS NumberField à une certaine précision?
https://stackoverflow.com/questions/1287584
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai une forme avec un NumberField qui obtient des valeurs de type float de JSON. Si les valeurs se trouvent des nombres entiers, aucune décimales sont affichés. Je voudrais montrer 2 décimales en tout temps. Y at-il une option de configuration pour cela?
Voici ma déclaration:
items: [
{
fieldLabel: 'Net Sales',
name: 'netSales',
allowBlank:false,
decimalPrecision:2
},
La solution
é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 override , et qui effectuera tous 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
},
EDIT
Remarquez la section commentée dans la première méthode setValue.
Autres conseils
Comme ce fut le meilleur résultat pour une requête de recherche de forcer décimaux dans un NumberField, pensé que je pourrais mettre à jour ce pour ceux utilisant ExtJS 4 +
L'entrée de filtrage depuis ExtJS 4 a été déléguée à une fonction valueToRaw, la fonction setValue utilisé est en fait de Ext.form.field.Text, de sorte que ce que je suis remplaçant ci-dessous.
J'ai aussi décidé d'avoir la force d'afficher des décimales pour être une option ( « forcePrecision ») configurable par NumberField, ce qui signifie que la dérogation ressemblera à 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;
}
});
Pour utiliser dans votre formulaire, vous souhaitez instancier comme ceci:
{
xtype: 'numberfield',
name: 'decimalsfield',
forcePrecision: true, #defaults to false
decimalPrecision: 3 #defaults to 2
}
Les champs non instancié avec forcePrecision. True se comporter exactement comme la valeur par défaut
La solution populaire ne fonctionne pas pour moi. En fait, le code de la solution est une copie exacte du code source EXT JS 3.3 qui, pour moi, affiche « 1 » au lieu de « 1,00 » lorsque decimalPrecision est 2. Sur la base de la suggestion de solution populaire pour passer outre setValue, voici ce Je l'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 code fixPrecision semble formater le nombre avec la précision souhaitée, javascript serait perdre la précision lors de la manipulation, il le fait sur les deux lignes avant l'appel à la fonction setValue de la superclasse. Réglage de la précision avec toFixed quand il est finalement converti en chaîne fait le travail.
Bonne chance!
Le meilleur pari est probablement ajouter un écouteur à l'événement de flou pour elle, puis utilisez la fonction intégrée en Javascript .toFixed (2) sur la valeur du champ.
L'option définition decimalPrecision est: « La précision maximale à afficher après le séparateur décimal (valeur par défaut) 2 »
Il n'y a pas d'option pour forcer le format, vous avez problably passer outre la classe NumberField.
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);
}
Ce code fonctionne très bien pour moi. Il ne fonctionnera pas avec la dérogation « ValueToRow » 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
})
Référence: Comment garder les zéros dans Ext.form. field.Number
