5 Oct 2007 5:36 PM #1
Grid Filter (Plugin)
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.
- http://www.vinylfox.com/extjs/grid-f...ckend-code.php - Thanks VinylFox
Ruby on Rails
- http://extjs.com/forum/showthread.php?p=77326#post77326 - Thanks Zyclops
- http://extjs.com/forum/showthread.ph...596#post176596 - Thanks Rotomaul
- http://www.debatablybeta.com/posts/u...g-with-django/ - Thanks Matt
- http://mcantrell.wordpress.com/2008/...ds-and-grails/ - Thanks Mike
- 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
5 Oct 2007 11:53 PM #2
Perfect. I can't imagine a better way to do that.
But I think I've found a bug, try to do as follow:
1. Resize the width of one column making the last column not visible on the grid panel (a horizontal scrollbar will be shown)
2. Go to the second page
3. Create a filter in the "Visible" column to show just "No" visibles records
After doing that I can't remove this filter anymore because the scrollbar is gone and the grid will no longer show any data because I'm on the second page that has no records.
In this particulary case, going back to the first page after any filtering, solves the problem. But what if after setting a filter on the last column made the grid show no records? In this case I wouldn't be able to remove the filter anymore.
6 Oct 2007 1:18 AM #3
Fantastic job Ambience.
BTW, problems like krycek has noticed, are the reason for what i prefer a separate panel/region/whatever for filtering, instead of rendering it on columns menu.
Thank you for porting it to 2.0 branch in so little time.
9 Oct 2007 10:08 AM #4
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.
10 Oct 2007 12:08 PM #5
Help me pls
Help me pls
Your filter works well,thanks for posting such a wonderful code
I m newbie and am learning through your code
so can i get a PHP file(ie action.php)so that i can try fetch from my database
Thanks in advance.
11 Oct 2007 8:19 AM #6
AlxH: Sure, post away. I am working on a grid state manager plugin myself that will have similar functionality. Though, I plan on using the setValue function to restore the state.
Lyardson: I have attached the two important files for parsing the filters and generating the required SQL. They are components of a much larger frame work which is losely based on WACT, so they won't function as is. But hopefully they should point you in the right direction =)
18 Dec 2007 7:25 PM #7
19 Nov 2007 6:12 AM #8
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.
19 Nov 2007 6:29 AM #9
2 Feb 2008 9:43 PM #10
This extension is great. Why the grid data is not shown.