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

我用這個在我的項目，但我不知道這是適合你的要求。

首先，檢查它的號碼和值爲「」然後根據這種情況提出適當的價值。如果它沒有「。」然後調用替換函數。

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

Answer 2

該解決方案在這裏找到：http://habrahabr.ru/post/137966/（俄語郎） 由於被視作版> 4.0的解決方案，我有他們的價值少不得不更改代碼，取代了標準的JS functions.Vykladyvayu在這裏，也許有人會需要：

要在頁面的標題開始連接сursor.js

// Author: Diego Perini <dperini@nwbox.com> 
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 
       }) 

      }, 
..... 

Answer 3

我實現了這個用簡單的方法。我的方法是啓用數字字段的關鍵事件，並檢查按鍵是'，'比添加'。'。以價值。這是實施;

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() +'.'); 
      } 
     } 
    }] 
});