Question

我正在制作一个自定义日期时间过滤器，因为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 = {};

以下是生成过滤器值的函数：

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

但它不会过滤网格数据。我怎样才能让它发挥作用？我错了什么？

Answer 1

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

用于日期时间的ExtJS自定义gridfilter

1 个答案: