ExtJS NumberField の小数表示を特定の精度に強制するにはどうすればよいですか?
https://stackoverflow.com/questions/1287584
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
のフォームがあります NumberField type の値を取得します float JSONから。値が整数の場合、小数点以下の桁は表示されません。小数点以下2桁を常に表示したいと考えています。これに対する設定オプションはありますか?
私の宣言は次のとおりです。
items: [
{
fieldLabel: 'Net Sales',
name: 'netSales',
allowBlank:false,
decimalPrecision:2
},
解決
のいずれかの拡張の
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
}),
またはを上書きの、そしてそれはあなたのアプリケーション内のすべてのnumberfieldsに影響します。
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
},
の の編集のの
第setValueメソッドでコメントセクションに注目してください。
他のヒント
これは、NumberField での小数を強制することに関する検索クエリのトップ結果だったので、ExtJS 4 以降を使用している人のためにこれを更新すると思いました。
ExtJS 4 以降の入力フィルタリングは valueToRaw 関数に委任されており、使用される setValue 関数は実際には Ext.form.field.Text からのものであるため、以下でオーバーライドしています。
また、小数点表示の強制を NumberField ごとに設定可能なオプション (「forcePrecision」) にすることにしました。つまり、オーバーライドは次のようになります。
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;
}
});
これをフォームで使用するには、次のようにインスタンス化します。
{
xtype: 'numberfield',
name: 'decimalsfield',
forcePrecision: true, #defaults to false
decimalPrecision: 3 #defaults to 2
}
インスタンス化されていないフィールド 力の精度:真実 デフォルトとまったく同じように動作します。
一般的なソリューションは私のために動作しませんでした。実際には、溶液中のコードは私のために、代わりにdecimalPrecisionはsetValueのをオーバーライドする一般的なソリューションの提案に基づいて2であるとき、これは何である「1.00」の「1」が表示され、EXT JS 3.3のソースコードの正確な複製であります私がやった：
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);
}
});
fixPrecisionコードが所望の精度で数値をフォーマットすると思われるにもかかわらず、javascriptのは、それがスーパークラスのsetValueの関数を呼び出す前に、2行にない操作中に精度を失うことになります。それが最終的に文字列に変換する場合toFixed精度を設定すると、それが動作作っています。
グッドラック！
最善の策はそれのためにblurイベントにリスナーを追加し、フィールドの値でJavaScript .toFixedに建て（2）関数を使用することが考えられます。
オプションdecimalPrecision定義は次のとおりです。 「（2デフォルト）小数点の後に表示する最大精度」
の形式を強制するオプションはありません、あなたはproblably NumberFieldクラスをオーバーライドする必要があります。
あなたは以下のような何かをしたい場合：
50を入力してください> uが得た50
50.10> 50.10
50.123> 50.12
これを試してください：
, 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);
}
このコードは私のために素晴らしい作品。それは文句を言わないのExtJS 4.2.0で「ValueToRow」オーバーライドアウトと連携ます。
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
})
