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