ExtJS数字字段上的两个或多个分隔符

Question

请告诉我，如何使用两种类型的分隔符数字输入字段？您只能使用一种标准方法，但在不同的键盘布局下，需要使用另一种方法，将数据保持为一种格式，即"

输入：10789或10.789保存：10.789

我使用Ext.form.NumberField编辑积分字段。

我的部分代码：

var editor = new Ext.ux.grid.RowEditor({
    saveText: LANG['update'],
    listeners: {
        afteredit: function(object, changes, r, rowIndex) {
            Ext.MessageBox.alert(LANG['alert_info'], LANG['memory']); }
        }
    }
});
 var userGrid = new Ext.grid.GridPanel({
        id: 'status-form',
        region:'center',
        margins: '5 5 5 5',
        store: Gstore,
        iconCls: 'icon-grid',
        plugins: [editor, summary],
        cm: new Ext.grid.ColumnModel([
            {header: "ID", width: 30, sortable: true, dataIndex: 'idb', renderer: formatID},
            {xtype: 'datecolumn', header: LANG['date'], width: 70, sortable: true, dataIndex: 'date', 
                groupRenderer: Ext.util.Format.dateRenderer('M Y'), 
                format: 'd/m/Y',
                editor: new Ext.form.DateField({
                    value: (new Date()).format('d/m/Y'), 
                    //format: 'd/m/Y',
                    minValue: '01/01/2010',
                    //minText: 'Please Check Correct Data',
                    maxValue: (new Date()).format('d/m/Y'),
                    editable: false
                })
            },
            {header: LANG['title'], width: 150, sortable: true, dataIndex: 'title', 
                editor: new Ext.form.TextField({}),
                summaryType: 'count',
                summaryRenderer: function(v, params, data){
                    return ((v === 0 || v > 1) ? LANG['Tasks']+ ': '+ v: '1 '+LANG['Task']);
                }
            },
            {header: LANG['lenght'], width: 60, sortable: true, dataIndex: 'lenght', renderer: formatKM, align: 'center', 
                summaryType: 'sum',
                summaryRenderer: Ext.util.Format.cifres2,
                editor: new Ext.form.NumberField({
                    allowNegative: false,
                    decimalPrecision: 2,
                    //decimalSeparator: ',',
                    maxValue: 1000
                    //allowBlank: false
                })
            },
            {header: LANG['time'], width: 30, sortable: true, dataIndex: 'time', align: 'center', 
                renderer: formatTimeStr,
                summaryType: 'sum22',
                editor: new Ext.form.NumberField({
                    //format: 'H:i',
                    allowNegative: false,
                    decimalPrecision: 2,
                    decimalSeparator: ':'
                })
            },
            {header: LANG['vsr'], width: 50, sortable: true, dataIndex: 'vsr', renderer: formatKM, align: 'center',  
                summaryType: 'average',
                summaryRenderer: Ext.util.Format.cifres2,
                editor: new Ext.form.NumberField({
                    allowNegative: false,
                    decimalPrecision: 2,
                    maxValue: 100
                })
            },
            {header: LANG['vmax'], width: 50, sortable: true, dataIndex: 'vmax', renderer: formatKM, align: 'center',
                summaryType: 'max',
                summaryRenderer: Ext.util.Format.cifres2,
                editor: new Ext.form.NumberField({
                    allowNegative: false,
                    decimalPrecision: 2,
                    maxValue: 100
                })
            }, ............

Answer 1

我用简单的方法实现了这一点。我的方法是启用数字字段的键事件，并检查按下的键是否为"，然后添加一个"价值。这就是执行；

Ext.create('Ext.form.Panel', {
title: 'On The Wall',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
    xtype: 'numberfield',
    anchor: '100%',
    name: 'bottles',
    fieldLabel: 'Bottles of Beer',
    enableKeyEvents : true,
    value: 99,
    maxValue: 99,
    minValue: 0,
    listeners : {
        keypress : function(view, e){
                if(e.getKey() == 44)
                    view.setRawValue(view.getRawValue() +'.');
           }
        }
    }]
});

Answer 2

我在项目中使用了这个，但我不知道它是否符合您的要求。

首先，检查值的数字和"."，然后根据这个条件设置合适的值。如果它的值中没有"."，则调用replace函数。

value.match(/^[0-9]+.?[0-9]*$/) ? Number(value) : Number((value.replace(',', '.')));

Answer 3

解决方案如下：http://habrahabr.ru/post/137966/（俄语郎）由于有一个版本>4.0的解决方案，我不得不更改代码，替换标准的JS函数。Vykladyvayu在这里，也许有人会需要：

从页面标题开始连接сursor.js

// Author: Diego Perini <[e-mail]>
var sb = new Array(
    'leftbox', 'rightbox', 'scrollLeft', 'scrollRight', 
    'caretPos', 'maxLength', 'textLength', 'availLength',
    'beforeCaret', 'afterCaret', 'selectedText'
)
var leftbox = {};
var rightbox = {};
var scrollLeft = {};
var scrollRight = {};
var caretPos = {};
var maxLength = {};
var textLength = {};
var availLength = {};
var beforeCaret = {};
var afterCaret = {};
var selectedText = {};
/*
for (var i in sb) {
    var v = '"var '+sb[i]+' = {}"';
    eval(v);
}
*/
var os = 0
var oe = 0
function update(o) {
    var t = o.value, s = getSelectionStart(o), e = getSelectionEnd(o)
    if (s == os && e == oe) return
    caretPos.firstChild.nodeValue = s
    maxLength.firstChild.nodeValue = o.getAttribute('maxLength')
    textLength.firstChild.nodeValue = t.length
    availLength.firstChild.nodeValue = o.getAttribute('maxLength') - t.length
    afterCaret.firstChild.nodeValue = t.substring(s).replace(/ /g, 'xa0') || 'xa0'
    beforeCaret.firstChild.nodeValue = t.substring(0, s).replace(/ /g, 'xa0') || 'xa0'
    selectedText.firstChild.nodeValue = t.substring(s, e).replace(/ /g, 'xa0') || 'xa0'
    rightbox.value = scrollRight.firstChild.nodeValue = t.substring(s).replace(/ /g, 'xa0') || 'xa0'
    leftbox.value = scrollLeft.firstChild.nodeValue = t.substring(0, s).replace(/ /g, 'xa0') || 'xa0'
    os = s
    oe = e
    return true
}
function setup() {
    for (var i in sb) eval(sb[i] + ' = document.getElementById(sb[i])')
    update(document.getElementById('textbox'))
}
function getSelectionStart(o) {
    if (o.createTextRange) {
        var r = document.selection.createRange().duplicate()
        r.moveEnd('character', o.value.length)
        if (r.text == '') return o.value.length
        return o.value.lastIndexOf(r.text)
    } else return o.selectionStart
}
function getSelectionEnd(o) {
    if (o.createTextRange) {
        var r = document.selection.createRange().duplicate()
        r.moveStart('character', -o.value.length)
        return r.text.length
    } else return o.selectionEnd
}

并连接插件：

Ext.ns('Ext.ux.form');
/**
 * @class Ext.ux.form.NumberInputFilter
 * @extends Ext.form.NumberField 
 * Plugin (ptype = 'numberinputfilter')  
 * @param allowedDecimalSeparators: ',.:-' and other
 * @ptype numberinputfilter
 */
Ext.ux.form.NumberInputFilter = Ext.extend(Ext.form.NumberField, {
    initComponent: function(){
        Ext.ux.form.NumberInputFilter.superclass.initComponent.call(this);
    },
    init : function(field) {
        if (!(field && field.isXType('numberfield'))) {
            return;
        }
        Ext.apply(field, {
            allowedDecimalSeparators : this.allowedDecimalSeparators,
            checkValue : function(newChar) {
                var raw = this.getRawValue();
                var el = Ext.get(this.id).dom;
                // functions taken from here http://javascript.nwbox.com/cursor_position/
                // and connected to a separate file cursor.js
                var start = getSelectionStart(el);
                var end = getSelectionEnd(el);
                if (start != end) {
                    // delete the selected text from the expected values
                    raw = raw.substring(0, start) + raw.substring(end);
                }
                if (Ext.isEmpty(raw)) {
                    return (newChar == this.decimalSeparator || (this.minValue < 0) && newChar == '-') || newChar.search('/^d$/');
                }
                if (raw.length == this.maxLength) {
                    return false;
                }
                if (newChar == this.decimalSeparator && (!this.allowDecimals || raw.indexOf(this.decimalSeparator) != -1)) {
                    return false;
                }
                // form the intended meaning
                raw = raw.substring(0, start) + newChar + raw.substring(start);
                raw = raw.split(new RegExp(this.decimalSeparator.replace("/([-.*+?^${}()|[]/\])/g", "\$1")));
                return (!raw[0] || this.intRe.search(raw[0])) && (!raw[1] || this.decRe.search(raw[1]));
            },
            filterKeys : function(e){
                if (e.ctrlKey && !e.altKey) {
                    return;
                }
                var key = e.getKey(),
                    charCode = String.fromCharCode(e.getCharCode());
                if(Ext.isGecko && (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE && e.button === -1))){
                    return;
                }
                if(!Ext.isGecko && e.isSpecialKey() && !charCode){
                    return;
                }
                // begin hack
                if (charCode != this.decimalSeparator && this.allowedDecimalSeparators.indexOf(charCode) != -1) {
                    // if the input character is not a decimal point, 
                    // But it is one of the alternatives, 
                    // Replace it with a decimal point
                    charCode = this.decimalSeparator;
                    if (Ext.isIE) {
                        // in the IE code of the pressed key can be substituted directly
                        e.browserEvent.keyCode = charCode.charCodeAt(0);
                    } else if (Ext.isGecko) {
                        // for gecko-engine slowing Event
                        e.stopEvent();
                        // create a new event with the modified code of the pressed key
                        var newEvent = document.createEvent('KeyEvents');
                        // Mandatory event must be cancelable 
                        // As it can be reversed, if the decimal 
                        // Delimiter is entered in the field
                        newEvent.initKeyEvent(
                            e.browserEvent.type,
                            e.browserEvent.bubbles,
                            true, //cancellable
                            e.browserEvent.view,
                            e.browserEvent.ctrlKey,
                            e.browserEvent.altKey,
                            e.browserEvent.shiftKey,
                            e.browserEvent.metaKey,
                            0, // keyCode
                            charCode.charCodeAt(0) // charCode
                        );
                        e.getTarget().dispatchEvent(newEvent);
                        // event generated, nothing doing.
                        return;
                    } else if (Ext.isWebKit) {
                        // stopped event
                        e.stopEvent();
                        // into webkit initKeyboardEvent dont work, use TextEvent
                        if (this.checkValue(charCode)) {
                            var newEvent = document.createEvent('TextEvent');
                            newEvent.initTextEvent(
                                'textInput', 
                                e.browserEvent.bubbles,
                                true,
                                e.browserEvent.view,
                                charCode
                            );
                            e.getTarget().dispatchEvent(newEvent);
                        }
                        return;
                    }
                }
                if (!this.checkValue(charCode)) {
                  e.stopEvent();
                }
                // end hack
            },
            updateDecimalPrecision : function(prec, force) {              
                if (prec == this.decimalPrecision && force !== true) {
                    return;
                }
                if (!Ext.isNumber(prec) || prec < 1) {
                    this.allowDecimals = false;
                } else {
                    this.decimalPrecision = prec;
                }
                var intRe = '^';
                if (this.minValue < 0) {
                    intRe +=  '-?';
                }
                intRe += '\d' + (Ext.isNumber(this.integerPrecision) ? '{1,' + this.integerPrecision + '}' : '+') + '$';
                this.intRe = new RegExp(intRe);
                if (this.allowDecimals) {
                    this.decRe = new RegExp('^\d{1,' + this.decimalPrecision + '}$');
                } else {
                    delete this.decRe;
                }
            },
            fixPrecision : function(value) {
                // support decimalSeparators
                if (Ext.isString(value)) {
                    value = value.replace(new RegExp('[' + (this.allowedDecimalSeparators + this.decimalSeparator).replace("/([-.*+?^${}()|[]/\])/g", "\$1")  + ']'), '.'); 
                }
                // end hack
                var me = this,
                    nan = isNaN(value),
                    precision = me.decimalPrecision;
                if (nan || !value) {
                    return nan ? '' : value;
                } else if (!me.allowDecimals || precision <= 0) {
                    precision = 0;
                }
                console.info(parseFloat(parseFloat(value).toFixed(precision)));
                return parseFloat(parseFloat(value).toFixed(precision));
            }
        });
        field.updateDecimalPrecision(field.decimalPrecision, true);
    }
});
Ext.preg('numberinputfilter', Ext.ux.form.NumberInputFilter);

使用任何分隔符，我们喜欢在数字字段中使用，只需列出它们：

.....
            {header: LANG['lenght'], width: 60, sortable: true, dataIndex: 'lenght', renderer: formatKM, align: 'center', 
                summaryType: 'sum',
                summaryRenderer: Ext.util.Format.cifres2,
                editor: new Ext.form.NumberField({
                    allowNegative: false,
                    decimalPrecision: 2,
                    plugins: new Ext.ux.form.NumberInputFilter({
allowedDecimalSeparators : ',.-'
}),
                    maxValue: 1000,
                    allowBlank: false
                })
            },
.....