The example highlights usage of components in headers for simple filtering tasks. If you read thru the example's code, you'll notice how it just uses ordinary form fields to act as each column's filter input; and add the ClearButton
plug in. This somewhat mimics the FilterHeader plug in.
You would also notice how it applies the filters; by calling a function defined in the same example which just blindly sets the filter. It is not a full-blown filtering component, but a simplified overview of one of the possible usages it can be applied to.
If you move further down, you'll also notice how the filters "stack" in the grids' list of filter (call
after you change the filter several times). Even if you fiddle with a single field, the count will grow over and over, even also if you empty the field.
Again, the example focuses in highlighting the feature's basic usage. It is not intended to highlight a full filtering implementation.
To have the behavior you want, you may choose three paths:
— use a proper component (the FilterHeader linked above would be one)
— have the
function remove the filter whenever its content string is empty
— have the
function do nothing when the filter string is empty and remove the filter for the column's field when the ClearButton
for that field is clicked.
Furthermore, to properly handle filters, you'd better have a deeper knowledge of how the filter is laid about the code. I'm afraid some reading & research would be required to this matter. Basically, having a good grasp of what is an Ext.util.Filter
to identify the right one among the list of active filters in the grid's store via Ext.data.Store.getFilters()
should be all you need to know to properly handle changes in the contents of the GridFilters columns.
As far as I could see, the actual FilterHeader
plug in's example has the filters cleaned as we clear each header field.
Hope this helps!