In this article I will show you how to make a simple @Unique(@DbColumn)) equivalent in the EXTJS grid

Introduction

When you have a notes view/EXTJS grid you often want to be able to do a lookup of all the unique values in a column – this is especially useful when you are also applying filters in the grid.

What is particularly useful is that the values in the column are uniqued automatically – this allows you to reduce down the values which are presented to the user to select from. This also means not having to create some elaborate search/filter capability going back to the server to change the lookup.

Caveat

This only works on the data in the current view so will not work if you are using remote filtering. In a later article I will demonstrate the new 4.2 BufferedRenderer which makes front end filtering on 10,000 documents a reality

The code

The code is very simple and can be demonstrated easily by adding a ComboBox to the grid – in this example the combobox is appended to the grid and the values come from the state field in the grid store

new Ext.form.ComboBox({
        renderTo: 'gridHere',
        store: grid.getStore().collect('state')
    });

Filtering the grid reduces the data

and then running the add combobox again now creates one with a reduced set – NOT the uniquing of the values automatically

To see the returned value we just use firebug and execute the collect method – you can see that the values are returned as an array – this could then be parsed into any field.

Conclusion

Using the EXTJS grid can be very much akin to using a notes view – the trick is having the knowledge to know what is possible.

PS

The data is returned in the order that it is presented in the grid – if you want alphabetically then so an array.sort()

🙂