EXT JS 5 - 自定義過濾器小時和分鐘

Question

我有幾分鐘的價值，我轉換成小時和分鐘（例如像615分鐘= 10小時和15分鐘）並顯示在網格中。默認情況下，ext js 5提供按字符串過濾。但我想按小時和分鐘過濾。可能嗎？如果是這樣，請告訴我。

Answer 1

你可以很容易地擴展Ext.grid.filters.filter.String過濾器來做到這一點。其使用

示例代碼timefield：

Ext.define('Ext.ux.grid.filters.filter.Time', { 
    extend: 'Ext.grid.filters.filter.String', 
    alias: 'grid.filter.time', 

    type: 'time', 
    operator: 'eq', 

    // change item template to timefield 
    itemDefaults: { 
     xtype: 'timefield', 
     enableKeyEvents: true, 
     format: 'H:i', 
     hideEmptyLabel: false, 
     iconCls: Ext.baseCSSPrefix + 'grid-filters-find', 
     labelSeparator: '', 
     labelWidth: 29, 
     margin: 0, 
     selectOnFocus: true 
    }, 
    createMenu: function() { 
     var me = this; 
     me.callParent(); 

     // add handler to change event 
     me.inputItem.on({ 
      scope: me, 
      change: { 
       fn: me.onChange, 
       buffer: 200 
      } 
     }); 
    }, 
    // handle change event 
    onChange: function(field) { 
     this.setValue(field.getValue()); 
    }, 
    // set value - value comes as date 
    setValue: function (value) { 
     var me = this; 

     if (me.inputItem) { 
      me.inputItem.setValue(value); 
     } 

     // convert date to number 
     me.filter.setValue(value.getHours() * 60 + value.getMinutes()); 

     if (value && me.active) { 
      me.updateStoreFilter(me.filter); 
     } else { 
      me.setActive(!!value); 
     } 
    }, 
    activateMenu: function() { 
     var value = this.filter.getValue(); 

     // convert number back to date 
     this.inputItem.setValue(
      new Date(2008, 0, 1, Math.floor(value/60), (value % 60), 0) 
     ); 
    } 
}); 

小提琴：http://jsfiddle.net/dw82uxkh/9/