A Combobox, die den Wert Auto-Korrektur

Question

ich eine Combobox haben, in dem man eine bestimmte Zeitspanne auswählen kann, zB:

5 minutes 
15 minutes 
1 hour 
2 hours 
1 day 
2 days 
1 week 
2 weeks 

Es überträgt immer die Anzahl der Minuten an den Server, aber der Benutzer wouldn‘ Ich verstehe, was "10080" bedeutet (bevor Sie versuchen zu berechnen: es ist eine Woche).

Eine neue Anforderung ist, dass der Benutzer in der Lage sein soll, beliebige Werte in diese Box einzugeben. Z.B. "20 Minuten", "1 Stunde 5 Minuten", "2h 5m" oder "1d 6h 120m"; und wenn das Feld programmgesteuert auf einen bestimmten Wert eingestellt ist (zB 75), sollte das Feld die korrekte Zeichenkette anzeigen (1 Stunde 15 Minuten)

Also habe ich einen Parser und eine Formatierungsfunktion geschrieben Aber wie kann ich meine Combobox benutzen?

Ich habe bereits versucht, das Überschreiben der rawToValue/valueToRaw Funktionspaar, ähnlich dem, was ich in der datefield Code gefunden:

rawToValue:function(rawValue) { 
    console.log('rawToValue'); 
    console.log(rawValue); 
    return this.parse(rawValue) || rawValue || null; 
}, 
valueToRaw:function(value) { 
    console.log('valueToRaw'); 
    console.log(value); 
    return this.format(value); 
}, 

aber sie werden nicht genannt, ich erhalte keine Konsolenprotokoll ausgegeben.

Dies sind die Parser/Formatierer Funktionen:

Ext.define('AlarmTimeField',{ 
    extend:'Ext.form.field.ComboBox', 
    format:function(minutes) { 
     var a = []; 
     Ext.each(this.units, function(unit) { 
      if(minutes >= unit.minutes) { 
       var unitCount = Math.floor(minutes/unit.minutes); 
       console.log(unitCount); 
       minutes = minutes-unitCount*unit.minutes; 
       a.push("" + unitCount + " " + (unitCount==1?unit.singular:unit.plural)); 
      } 
     }); 
     return a.join(' '); 
    }, 
    parse:function(input) { 
     if(!input) return 0; 
     var me=this, 
      inputSplit = input.split(' '), 
      value = 0, 
      lastNum = 0; 
     Ext.each(inputSplit,function(input) { 
      if(!input) return; 
      else if(Ext.isNumeric(input)) lastNum = input; 
      else if(Ext.isNumeric(input[0])) { 
       var inputUnit = input.slice(-1), 
        inputValue = input.slice(0,-1); 
       Ext.each(me.units,function(unit) { 
        if(inputUnit==unit.abbr) { 
         value+=unit.minutes*inputValue; 
        } 
       }); 
      } 
      else { 
       Ext.each(me.units,function(unit) { 
        if(input==unit.singular || input==unit.plural || input==unit.abbr) { 
         value+=unit.minutes*lastNum; 
        } 
       }); 
      } 
     }); 
     return value; 
    }, 
    units:[{ 
     minutes:10080, 
     abbr:'w', 
     singular:'week', 
     plural:'weeks' 
    },{ 
     minutes:1440, 
     abbr:'d', 
     singular:'day', 
     plural:'days' 
    },{ 
     minutes:60, 
     abbr:'h', 
     singular:'hour', 
     plural:'hours' 
    },{ 
     minutes:1, 
     abbr:'m', 
     singular:'minute', 
     plural:'minutes' 
    }] 
}); 

Answer 1

Die Hauptidee ist, dass Ext.form.field.ComboBox Wert tatsächlich Instanz Ext.data.Model ist, so dass Ihr Wert und angezeigten Wert wird nur Modell Attributwerte und jedes Mal, wenn Sie Wert zu ändern/Angezeigter Wert müssen Sie binded Model Instanz aktualisieren (es ist meine Vision, korrigieren Sie mich, wenn ich falsch liege).

Ich denke, dass Ext.form.field.ComboBox.validator schöner Ort manuell eingegebenen Werte zu analysieren (und Sie können Fehlermeldung sofort angezeigt, wenn eingegebene Wert falsch ist), so können Sie es wie folgt außer Kraft setzen:

   validator: function (value) { 
        // TODO: Add regexp value format validator 

        var minutes = me.parse(value); 
        // Add check for zero/empty values if needed 
        if (minutes === 0) 
        // Add meaningful error message 
         return 'Incorrect input'; 
        else { 
         me.setValue(Ext.create('Ext.data.Model', { 
          value: minutes, 
          text: value 
         })); 
         return true; 
        } 
       } 

Seine ganz rohes Beispiel, aber ich denke, dass diese Idee klar ist.

Um Formatwerte gefassten programmatisch über setValue() Methode können Sie diese Methode überschreiben, wie folgt aus:

 setValue: function (value) { 
      // TODO: Add array of values support 
      if (Ext.isNumber(value)) 
       value = Ext.create('Ext.data.Model', { 
        value: value, 
        text: this.format(value) 
       }); 

      this.callParent([value]); 
     } 

prüfen diese fork of your fiddle. Ich hoffe, dass ich ein wenig geholfen habe.