EXTJS 5 - 小时和分钟的自定义过滤器

时间:2014-11-25 10:19:47

标签: extjs extjs4.2 extjs5

我有几分钟的价值,我转换成小时和分钟(例如615分钟= 10小时15分钟)并以网格显示。默认情况下,ext js 5按字符串提供过滤器。但我想按小时和分钟过滤。可能吗?如果是的话,请告诉我。

1 个答案:

答案 0 :(得分:3)

您可以轻松扩展Ext.grid.filters.filter.String过滤器来执行此操作。

使用时间段的示例代码:

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/