常规功能和模块自定义系统 (cfcmms)—056 extjs6带分节符的数值字段和百分比字段

056 extjs6带分节符的数值字段和百分比字段

　　Extjs中的数值控件NumberField中没有加入显示分节符的功能，在研究了其NumberField的源码后，对其类进行了重写，加入了可以把数值分节显示的功能和录入百分比的功能。设置的：

items : [ {xtype : 'numberfield',fieldLabel : '分节显示数值',allowSection : true,decimalPrecision : 2,decimalSeparator : '.',zeroDisplayNone : false,allowBlank : false,selectOnFocus : true,name : 'aa'}, {xtype : 'numberfield',fieldLabel : '百分比',allowSection : true,zeroDisplayNone : true,isPercent : true,decimalPrecision : 4,step : 0.0001,name : 'aa111',}, {xtype : 'numberfield',fieldLabel : '默认数值字段',decimalPrecision : 2,selectOnFocus : true,name : 'aab'} ]

具体显示如下：

源码是一个overrides的类，覆写了一些方法。

Ext.define('overrides.form.field.Number',{uses : [ 'Ext.form.field.Number' ],override : 'Ext.form.field.Number',fieldStyle : "text-align:right",/** * 数值是否加入分节符，是以逗号分隔比如： 123,452,000.00 */allowSection : false,/** * 数值分节符，为逗号(不要修改) */sectionSeparator : ',',/** * 零值是否显示，如果设置为true，则 0 值不显示。不显示的时候如果该字段不能为空，则通不过检测 */zeroDisplayNone : false,/** * 是否是百分比 *  * true : 数值0.56 会显示成 56% , 提交的时候仍然是0.56 *  * 小数位数是指相对于原始值的，0.56的话小数位置是2，显示56%; 0.5678的小数位置为4,显示56.78% *  */isPercent : false,/** * 百分比符号，为%(不要修改) */percentSign : '%',/** * 对于百分比的数值，以下二个设置，都是对应于原始的小数值，因此对于12.34%，应设置成下面的样式： *  * decimalPrecision : 4, *  * step : 0.0001, *  * 对于 23％，应设置成 *  * decimalPrecision : 2, *  * step : 0.01, *  */initComponent : function() {var me = this;if (me.isPercent)me.allowSection = true;if (me.allowSection)me.baseChars = me.baseChars + me.sectionSeparator;me.callParent();},/** * 输入的数值转换成值 */rawToValue : function(rawValue) {var value = this.fixPrecision(this.parseValue(rawValue));if (value === null) {value = rawValue || null;}if (this.isPercent)value /= 100.;return value;},/** * 字符转换成录入的值 */valueToRaw : function(value) {var me = this, decimalSeparator = me.decimalSeparator;value = me.parseValue(value);value = me.fixPrecision(value);if (me.isPercent)value *= 100;value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));if (this.allowSection)value = isNaN(value) ? '' : me.valueToRawWithSection(value).replace('.', decimalSeparator);elsevalue = isNaN(value) ? '' : String(value).replace('.',decimalSeparator);return value;},/** * 将数值转换成有分节的字答卷串，百分比的话，加入 ' %' */valueToRawWithSection : function(value) {var me = this;if (me.zeroDisplayNone && !value)return '';if (this.allowDecimals) {if (me.isPercent)// 这里已经是除了100的数值，在转换的时候精度减少2位value = value.toFixed(Math.max(0, me.decimalPrecision - 2));elsevalue = value.toFixed(me.decimalPrecision);}value = String(value);var ps = value.split('.'), whole = ps[0], sub = ps[1] ? '.' + ps[1]: '', r = /(\d+)(\d{3})/;while (r.test(whole)) {whole = whole.replace(r, '$1' + me.sectionSeparator + '$2');}value = whole + sub;if (me.isPercent)value += (' ' + me.percentSign);return value;},getErrors : function(value) {value = arguments.length > 0 ? value.replace(/,/g, '').replace('%', ''): this.processRawValue(this.getRawValue());return this.callParent([ value ]);},getSubmitValue : function() {var me = this, value = me.callParent();if (!me.submitLocaleSeparator) {value = value.replace(me.decimalSeparator, '.');}if (me.isPercent) {// 如果是百分比，提交的数据除以100value = me.parseValue(value) / 100.;value = String(value);}return value;},parseValue : function(value) {// 取消掉字符串里的 ,% 这二个字符。value = parseFloat(String(value).replace(this.decimalSeparator, '.').replace(/,/g, '').replace('%', ''));return isNaN(value) ? null : value;},processRawValue : function(value) {var me = this, stripRe = me.stripCharsRe, mod, newValue;// 下面一句不加的话 bind 在有分节符或%的时候将不能正常工作value = value.replace(/,/g, '').replace('%', '');if (stripRe) {if (!stripRe.global) {mod = 'g';mod += (stripRe.ignoreCase) ? 'i' : '';mod += (stripRe.multiline) ? 'm' : '';stripRe = new RegExp(stripRe.source, mod);}newValue = value.replace(stripRe, '');if (newValue !== value) {// 这一句要去掉，不然分节符就没有了// me.setRawValue(newValue);if (me.lastValue === value) {me.lastValue = newValue;}value = newValue;}}return value;}});