該自動校正值

Question

我有一個組合框的組合框，其中一個可以選擇一定的時間跨度，例如：

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

它總是發送分鐘到服務器的數量，但用戶止跌」不要理解「10080」是什麼意思（在你嘗試計算之前：這是一週）。

一個新的要求是，用戶應該能夠爲任意值輸入到該框中。例如。 「20分鐘」，「1小時5分鐘」，「2h 5m」或「1d 6h 120m」;並且如果該字段以編程方式設置爲特定值（例如75），則該字段應顯示正確的字符串（1小時15分鐘）

所以我寫了一個解析器和一個格式化函數（見下文），但我怎樣才能讓我的組合框使用這些？

我已經嘗試重寫rawToValue/valueToRaw功能對，類似於我在datefield代碼中發現：

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

，但他們不叫，我沒有得到任何控制檯日誌輸出。

這些是解析器/格式化功能：

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

主要的想法是，Ext.form.field.ComboBox值實際上是Ext.data.Model實例，所以你的價值，顯示值只是模型屬性值，每次更改值/顯示值，你必須更新綁定模型實例（它是我的願景，如果我錯了，請糾正我）。

我認爲Ext.form.field.ComboBox.validator是不錯的地方解析手動輸入值（如果輸入的值不正確，你可以即時顯示錯誤消息），這樣你就可以覆蓋它是這樣的：

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

其相當舉例來說，但我認爲這個想法很清楚。

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

入住此fork of your fiddle：

爲格式的值通過setValue()方法，你可以重寫此方法，這樣的編程設置好的。我希望我能幫一點點。