Filtering Resources And Tasks In Ext Scheduler

Filtering is a critical feature in any data table or scheduler component where you want to work with large data sets efficiently. In our Scheduler component you would typically want to filter resources or their tasks but you can even filter the TimeAxis. To show how easy it is to filter your ResourceStore or EventStore, we built a small sample:

In this sample you can try resource filtering as well as both filtering and highlighting tasks. The magic is done purely by the powerful Ext JS Store class which offers a filter method that is used in the demo. You can filter by any field/value in your model, or use the filterBy method to provide a filterer function. The filter fields you see in the demo are simple Ext JS TextFields which are fed the target store as a config property:

Ext.define('Sch.examples.filtering.view.FilterField', {
    extend : 'Ext.form.TextField',
    xtype  : 'demofilterfield',

    enableKeyEvents : true,
    store    : null,
    property : '',

    initComponent : function () {
        this.store = Ext.StoreMgr.lookup(this.store);
        this.callParent(arguments);
    },

    onKeyUp : function (e) {
        var value = this.getValue().toLowerCase();
        var store = this.store;

        if (e.getKey() === e.ESC) {
            store.clearFilter();
            this.setValue('');
        } else {
            store.filter([
                {
                    property : this.property,
                    value    : value,
                    anyMatch : true
                }
            ]);
        }
    },

    listeners : {
        keyup : 'onKeyUp'
    }
});

We hope you download our latest version to try out the filtering demo, and please let me know if you’d like to any other feature showcased in our demos. Happy filtering!