It's not necessary to create an override to implement the filtering feature on a grid. Many of the steps outlined in the guide prepared by iplanit are valid. For example, copying the files from the Examples/ux folder, adding the CSS, etc.

However creating an override is more difficult, involves more steps and is less maintainable than doing things in SA. Also, when not using an override, there's no need to create a separate class (there's no harm, but also no need).

So, what do I mean?

Since SA was in beta (then called Designer) it has been possible to add a configuration property of any name referencing any type to any class. You do this by using the properties filter. Select a class, then in the place when you'd normally type some text you want to use as a property filter type following text including the colon:

Code:

mynewproperty: true

then press the 'Add' button. You will see a new property called 'mynewproperty' and a checked check box alongside. So creating a property is easy.

Grid filtering is a feature and the property needed to invoke a feature, which is called 'features', is equally easy to create but this time the property is an array. So start out creating the property:

Code:

features: []

and press the 'add' button. Now you have a new property with the green blob button as its value. Click on the blob to enter more information. To start with you will have the just the open and close square brackets you entered. Put them on separate lines and between them define the features you need. When you've finished it should look something like this:

Here I've created features for grouping and summary as well as filtering but you don't have to. However, if you want to use other features they must appear here. That is, you can't use this technique and use the 'Grid features' option provided by SA at the same time. This is because any ad-hoc properties you create go at the beginning of the configuration. The 'features' property created by SA goes right at the end and, so, wins every time. Even so, you are able to use the built-in feature to create the syntax you need to paste into your own 'features' property and then delete the feature created by SA.

The last step is to enable filtering for each column. Columns can be filtered if they expose a 'filterable' property which is set to true. Select a column you want to be able to filter and enter this into the property filter box (just like above):

Code:

filterable: true

and then press the add button. If you have assigned a type to your column in the underlying model or store and have only simple filtering needs, that's it. If you need to provide more filter information then you are able to create a 'filters' property on each column. This is an object property. This example is taken from the Sencha examples. First create a property by entering the text:

Code:

filter: {}

then press the 'add' button. The edit the property to add:

Code:

{
type: 'list',
store: optionsStore
}

For more information about the filter options see the ExtJS documentation.

Grid filtering is a feature and the property needed to invoke a feature, which is called 'features', is equally easy to create but this time the property is an array. So start out creating the property: