Làm cách nào để buộc hiển thị một số thập phân trong một số ExtJS NumberField đến một độ chính xác nhất định?

Question

Tôi có biểu mẫu có NumberField nhận các giá trị loại float từ JSON. Nếu các giá trị xảy ra là số nguyên thì không có vị trí thập phân nào được hiển thị. Tôi muốn hiển thị 2 chữ số thập phân mọi lúc. Có một tùy chọn cấu hình cho điều này?

Dưới đây là lời tuyên bố của tôi:

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

Answer 1

hoặc mở rộng:

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

hoặc override, và điều đó sẽ ảnh hưởng đến tất cả numberfields trong ứng dụng của bạn:

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

Lưu ý phần nhận xét trong phương thức setValue đầu tiên.

Answer 2

Định nghĩa tùy chọn decimalPrecision là: "Độ chính xác tối đa để hiển thị sau khi tách số thập phân (mặc định là 2)"

Không có tùy chọn để buộc các định dạng , bạn có thể phải ghi đè lên lớp NumberField.

Answer 3

Đặt cược tốt nhất có thể là thêm người nghe vào sự kiện làm mờ cho nó và sau đó sử dụng hàm Javascript .toFixed (2) được tích hợp trên giá trị của trường.

Answer 4

Giải pháp phổ biến không phù hợp với tôi. Trong thực tế, mã trong giải pháp là bản sao chính xác của mã nguồn EXT JS 3.3, cho tôi, hiển thị "1" thay vì "1.00" khi decimalPrecision là 2. Dựa trên đề xuất của giải pháp phổ biến để ghi đè setValue, đây là những gì tôi đã làm:

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ặc dù mã fixPrecision dường như định dạng số với độ chính xác mong muốn, javascript sẽ mất độ chính xác trong thao tác nó trên hai dòng trước khi cuộc gọi đến chức năng setValue của lớp cha. Thiết lập độ chính xác với toFixed khi nó cuối cùng được chuyển đổi thành một String làm cho nó hoạt động.

Chúc may mắn!

Answer 5

Vì đây là kết quả hàng đầu cho một truy vấn tìm kiếm về buộc thập phân trong một NumberField, nghĩ tôi sẽ cập nhật này cho những người sử dụng ExtJS 4+

Các đầu vào lọc từ ExtJS 4 đã được giao cho một chức năng valueToRaw, Hàm setValue được sử dụng thực sự là từ Ext.form.field.Text, vì vậy đó là những gì tôi ghi đè bên dưới.

tôi cũng quyết định có buộc hiển thị số thập phân là một tùy chọn ('forcePrecision') có thể cấu hình mỗi NumberField, có nghĩa là ghi đè sẽ trông như thế này:

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

Để sử dụng dưới hình thức của bạn, bạn muốn nhanh chóng nó như thế này:

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

Fields không instantiated với forcePrecision: true y hệt như mặc định.

Answer 6

nếu bạn muốn một cái gì đó như dưới đây:

nhập 50> u got 50

50,10> 50,10

50,123> 50,12

Hãy thử điều này:

, 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

này mã hoạt động tuyệt vời cho tôi. Nó sẽ không hoạt động với việc ghi đè "ValueToRow" trong 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 
    }) 

tham khảo: How to keep the trailing zeros in Ext.form.field.Number ?