15

JSON からNumberField型の値を取得するフォームがあります。float値がたまたま整数である場合、小数点以下の桁数は表示されません。常に小数点以下 2 桁を表示したいと考えています。これには設定オプションがありますか?

これが私の宣言です：

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

7 に答える 7

14

これは、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
}

forcePrecision: trueでインスタンス化されていないフィールドは、デフォルトとまったく同じように動作します。

于 2012-12-06T02:58:37.700 に答える
11

一般的な解決策は私にはうまくいきませんでした。実際、ソリューションのコードは EXT JS 3.3 ソース コードの正確な複製であり、私にとっては、decimalPrecision が 2 の場合に「1.00」ではなく「1」を表示します。やった：

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 コードは目的の精度で数値をフォーマットしているように見えますが、スーパークラスの setValue 関数を呼び出す前の 2 行で行われる操作中に、javascript は精度を失います。最終的に String に変換されるときに toFixed で精度を設定すると、機能するようになりました。

幸運を！

于 2011-05-13T18:02:00.637 に答える
9

拡張する:

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

またはoverride、およびそれはアプリケーションのすべての数値フィールドに影響します:

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 メソッドのコメント セクションに注目してください。

于 2009-08-17T16:14:26.250 に答える
2

おそらく最善の策は、リスナーをぼかしイベントに追加し、フィールドの値に対して組み込みの Javascript .toFixed(2) 関数を使用することです。

于 2009-08-17T12:59:55.553 に答える
1

オプション decimalPrecision の定義は次のとおりです。「小数点の後に表示する最大精度 (デフォルトは 2)」

フォーマットを強制するオプションはありません。おそらく NumberField クラスをオーバーライドする必要があります。

于 2009-08-17T12:58:28.907 に答える