Ext JS Premium Member
Grid Filter (Plugin)
Moderator edit: There's a 3.x version in svn now for those interested, click here.
I am excited to hear that a number of people have started using / extending the filters. If you have an extension (like some sort of panel based filter configuration) PM me with a link to the related thread and I will link it here. Thanks to every one who has helped bang out bugs and assisted newer users.
Also, I would like to credit ControlPath, the company that pays for my time =) The filters were developed to support an ongoing effort to transition the product to a 100% Ext UI and they were kind enough to let me share the code with you guys.
Server Side Code
Due to copyright issues I cannot share my implementation of the server side code (written in Java), and the PHP is to entangled in a bigger framework / hacked together to share. If you have an implementation you would like to share, PM me with the files and I will link them here.
Ruby on Rails
- Grid filters now function as a plugin for the grid. As a result you can use them in conjunction with custom views (like grouping).
- List filters are now much more robust in that you can provide them with a Ext.data.Store to load their options the first time they are shown.
- This version does not have a a dynamic loader included, read the source to find out where to put yours (documented).
- The way filters are configured has changed ever so slightly.
- Now 100% Ext (Prototype-free).
- Local filtering can now be enabled by passing the 'local: true' as a config value
- Fixed some of the filters setValue functions.
- Stateful mode can now be enabled by passing a string value for the config option 'stateId'. This may be updated in the next Ext code push to store this information when the grid saves/restores its state. However, the events required are not part of the current beta (I think they are in SVN however)
- Add an 'autoReload' field / config option that defaults to true. Set this to false if you wish to prevent the datastore from being reloaded when you make changes to the filters.
Version 0.2.1 (Minor update, thanks for the feedback)
- Date filters will disable conflicting date ranges [Thanks hendricd]
- Added missing super constructor line to Filter [Thanks hendricd]
- Boolean filters now use uniqu radio group IDs (so you can have more then one!) [Thanks olive38]
- Added a 'serialize' event to the Filter class. Using this you can attach additional parameters to serialization data before it is encoded and sent to the server.
- You can pass the GridFilters object as a plugin to the paging toolbar and it will reset the page to 1 whenever you update the filters.
- Boolean filters take a defaultValue config parameter. Set this to null if you do not want either option to be checked by default.
Version 0.2.2, 0.2.3, 0.2.4, 0.2.5
- Fixed an issue with numeric fields displaying "NaN" initially in RC1 [Thanks JeffHowden]
- Fixed an issue with filter application in the absence of request options [Thanks JorisA]
- Date format is now forwarded to the date selectors [Thanks hendricd]
- Small bug fix with filters being activated before a load event on grids with the filters used as a plug in to the paging tool bar *inhale* [Thanks hendricd]
- Fixed a global namespace leak. [Thanks hendricd]
- Reload now cancels the deferred update. [Thanks ericwaldheim]
- Local string filtering is now case insensitive . [Thanks robasi]
- Removed a console.log in applyState(), oops >.<
- The filter collection will now bind to the 'beforestaterestore' and 'beforestatesave' events in order to be stateful. Set your stateId on the associated grid.
- Future versions will now include the version number in the header of GridFilters.js for your convenience
Version 0.2.7 June 4th, 2008
- Add some localization support (post) [Thanks wm003]
- Tweeked EditableItem to have better icon support (post) [Thanks AlxH]
- Added green tinted column header graphics and CSS classes for filtered columns
- Icons are now all defined as styles in the resources/style.css file. You'll need to link to this in order to have them and get the new column header style. (no more need for prototype changes)
Version 0.2.8 August 22nd, 2008
- Refactored ListFilter.js to use a new Ext.ux.menu.ListMenu component.
- I've included Ext.ux.menu.TreeMenu, I can't really offer allot of support for it, but it's what we use for tree filters.
- Fixed text selection and general carrot wonkyness in Firfox [Big Thanks to Steffen Hiller]
- You can now use apostrophes in Firefox 3 o.O
Ext JS Premium Member
As this seems to be a common criticism (esp from ejetorix ), I just want to take a moment to defend my decisions =)
Originally Posted by ejetorix
While I agree the filters under the headers are perhaps more comfortable for users who are familiar with Excel, this method simply does not provide the space / flexibility we (the people at my company) need. For example, one of our columns represents an object in a directed acyclic graph. For which we provide the ability to filter on name, id range, or by selecting the object in a tree (rendered in place) and optionally include all children. One or more of these options may be active at any given time.(Screenshot 1&2) Or, in a much more simple example you have the list filter which can allow for the selection of one or more items to filter by. With out the filter menu, these options would be far to complex to express in the limited space under the headers. Additionally, chances are that if a grid is filtered it is because a user has chosen to filter it and I feel that having that information constantly displayed verbosely is unneeded clutter. Especially when, in the case of commonly filtered fields in a complex layout, you can us listeners and API driven filter activation to provider richer feedback about what the data shown represents (Screenshot 3)
Furthermore, I feel that the logical 'binding' of filters to an existing visual representation of the data key (the column header) is much easier for people to understand then disjoint spreadsheet of filters. While a separate tab could provide compound column filters and additional flexibility (AND / OR instead of just and); it has been our experience (as we've developed similar panels in the past) that that kind of power is confusing to must users and only leveraged by ... well mostly just the developers =\
I do appreciate feedback and will try to incorporate what I can into the filters to make them better. However (there's always a however), I am fairly confident in my decision to make them menu driven as opposed to panel/tab driven. This does not preclude a panel based tie-in. It simply means I my self will most likely not be developing it.
How, i can get the source code (action.php) ..?
Originally Posted by lyardson
where i can see it..
Can you please share the js code to create the above filter with all the filter columns under one hierarchy and grid being used to select the filter values.
@paliwalg - which ' above filter' ? What are trying to do ?
This extension is great. Why the grid data is not shown.