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/