-2

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

ただし、グリッドのデータはフィルタリングされません。どうすれば動作させることができますか？私は何を間違えたのですか？

4

1 に答える 1

1

ストアがクライアント側でフィルタリングされている場合は、validateRecordメソッドを実装する必要があります。

于 2013-05-31T13:59:31.250 に答える