ExtJS表單字段使用渲染器

Question

我正在嘗試創建一個PercentField組件，它可以在ExtJS表單上使用textfield。我正在尋找的行爲是爲該字段顯示百分比值，例如， 25%或400%，但在用戶編輯字段或提交表單時爲十進制數時具有基礎值。 .25或4。

我已經成功地通過在網格列使用的渲染器，（Here's a fiddle)得到這個工作，但它並不像textfield對使用​​基本形式領域的渲染屬性。我已經看過了rawToValue和valueToRaw方法，但他們似乎並不完全是我要找的任何建議？

Answer 1

據我所知，表單字段的模板是不可能的，這將需要翻轉輸入元素並顯示一個div或東西，在焦點和模糊。這是可行的，但這意味着一些微調CSS。

一個更簡單的選項是實施自定義valueToRaw和rawToValue方法，並讓Ext處理值生命週期（這實際上是複雜的部分）。你仍然必須改變重點和模糊的價值，但這仍然是非常簡單的。

這裏是你可以建立在一個例子（見fiddle）：

Ext.define('My.PercentTextField', { 
    extend: 'Ext.form.field.Text', 

    onFocus: function() { 
     this.callParent(arguments); 
     var v = this.getValue(); 
     if (Ext.isNumeric(v)) { 
      this.setRawValue(this.rawToValue(v)); 
     } 
    }, 

    onBlur: function() { 
     this.callParent(arguments); 
     var v = this.getValue(); 
     if (Ext.isNumeric(v)) { 
      this.setRawValue(this.valueToRaw(v)); 
     } 
    }, 

    valueToRaw: function(v) { 
     return Ext.isEmpty(v) 
      ? '' 
      : v * 100 + ' %'; 
    }, 

    rawToValue: function(v) { 
     // cast to float 
     if (!Ext.isEmpty(v)) { 
      var pcRe = /^(\d*(?:\.\d*)?)\s*%$/, 
       dcRe = /^\d*(?:\.\d*)?$/, 
       precision = 2, 
       floatValue, 
       match; 
      if (match = dcRe.test(v)) { // decimal input, eg. .33 
       floatValue = v * 1; 
      } else if (match = pcRe.exec(v)) { // % input, eg. 33 % 
       floatValue = match[1]/100; 
      } else { 
       // invalid input 
       return undefined; 
      } 
      floatValue = Number.parseFloat(floatValue); 
      if (isNaN(floatValue)) { 
       return undefined; 
      } else { 
       return floatValue.toFixed(precision); 
      } 
     } else { 
      return undefined; 
     } 
    } 
});