ExtJS自定义gridfilter的日期时间

ExtJS custom gridfilter for datetime

本文关键字:日期 时间 gridfilter 自定义 ExtJS      更新时间:2023-09-26

我正在制作一个自定义日期时间过滤器,因为Ext的日期时间过滤器不是很好。我有一个日期时间字段:一个日期字段和时间字段在一个字段容器有值…

我扩展了Ext.ux.grid.filter.Filter并构建了我的过滤器,就像日期过滤器一样。

fieldCfg = Ext.apply(me.fieldOpts, {
    xtype: 'datetimefield',
    overflowX: 'visible',
    format:  me.format,
});
fields = {};
for (i = 0, len = me.menuItems.length; i < len; i++) {
    item = me.menuItems[i];
    if (item !== '-') {
        cfg = {
            itemId: 'range-' + item,
            text: me[item + 'Text'],
            menu: Ext.create('Ext.menu.Menu', {
                plain: true,
                items: [
                    Ext.apply(fieldCfg, {
                        itemId: item,
                        margin: '2 10 2 2',
                        overflowX: 'visible'
                    })
                ],
            }),
            listeners: {
                scope: me,
                checkchange: me.onCheckChange,
                render: function (t){
                    var dtf = t.menu.items.items[0];
                    var df = dtf.getDateField();
                    var tf = dtf.getTimeField();
                    df.on("select", me.selectDateEvent, me)
                    tf.on("select", me.selectDateEvent, me)
                },
            }
        };
        item = me.fields[item] = Ext.create('Ext.menu.CheckItem', cfg);
    }
    me.menu.add(item);
}
me.values = {};

下面是filter的value函数:

selectDateEvent: function (t) {
    if(t.ownerCt.getValue() !== undefined){
        var date = Ext.Date.format(t.ownerCt.getValue(), format);
        this.values[t.ownerCt.itemId] = date;
        this.fireEvent('update', this);
        this.onMenuSelect(t.ownerCt, date);
    }
},
下面是其他处理程序的代码:
onCheckChange: function(item, checked) {
    var me = this, 
        picker = item.menu.items.items[0], 
        itemId = picker.itemId, 
        values = me.values;
    if (checked) {
        values[itemId] = picker.getValue();
    } else {
        delete values[itemId]
    }
    me.setActive(me.isActivatable());
    me.fireEvent('update', me);
}
onMenuSelect: function(picker, date) {
    var fields = this.fields, 
        field = this.fields[picker.itemId];
    field.setChecked(true);
    if (field == fields.on) {
        fields.before.setChecked(false, true);
        fields.after.setChecked(false, true);
    } else {
        fields.on.setChecked(false, true);
        if (field == fields.after && this.getFieldValue('before') < date) {
            fields.before.setChecked(false, true);
        } else if (field == fields.before && this.getFieldValue('after') > date) {
            fields.after.setChecked(false, true);
        }
    }
    this.fireEvent('update', this);
    picker.up('menu').hide();
}

但是它不过滤网格的数据。我怎样才能让它工作呢?我做错了什么?

如果您的商店在客户端进行了过滤,则需要实现validateRecord方法。