Posts Tagged ‘DelayedTask’

Filtering with delay

Filtering data can be done using a filter button that is clicked once the filter options are filled and the result will then show. This is the traditional way of doing it and it is the preferred way in many cases. It is also possible to omit the filter button and have the result updated automatically as the filter options change. In this case, when the user writes a text in a filter field, it is not desired to fire the filter event for every key press, especially when the filtering is done remotely on the server – better wait until the user has finished writing. The filtering should only occur once the filter options has not changed for a certain amount og time – like ½ second.
To accomplice this in ExtJs 4 we use a DelayedTask. It is called for every change in the filter options but it waits for some time until it fires the filter function. When a new change event from the filter options are reported to the DelayedTask, the previous reported change event is cancelled and the time is reset.

var filterTask = new Ext.util.DelayedTask();

var filterChange = function(field, newValue) {
        filterTask.delay(500, filter, this, [field, newValue]);

var filter = function(field, newValue) {
        store.currentPage = 1;
                property: 'description',
                anyMatch: true,
                value   : newValue

In this case there is only one field in the filter options and filterChange is called on the fields change event. The filter task is then called with a delay of 500 ms. The function filter is where the filtering is done. It is called by the filterTask 500 ms after the last change event.

First the existing filters are cleared. Do not use the stores clearFilter method for this because it will load the unfiltered data. Next we want the filtered result to start on page 1. Do not use the stores loadPage(1) for this because it will also load the unfiltered data. Last we apply the new filter with the filter method and it will load page 1 of the filtered data.

Categories: extjs4 Tags: , ,