Cherry On Ext: yet another grid filtering tool (and not only)

[Attilio.Dona]

Hi all, we are pleased to share with all the community the Cherry On Ext library.
We named the whole thing Cherry on Ext because it's our little cherry on the big Ext Js cake.

We developed Cherry On Ext to satisfy users, ranging from expert programmers to total newbies, who need an efficient tool that filters grids with a huge amount of data.

Cherry On Ext is published on http://code.google.com/p/cherryonext/
(demo: http://cherryonext.googlecode.com/sv...llTogether.htm.
Don't forget to right click on the grid to see the quick filter).

The latest 0.3.0 release is out and users are strongly encouraged to update old versions.
0.3.0 release is compatible with 0.2.0, but If migrating from a release older than 0.2.0 see the ChangeLog http://code.google.com/p/cherryonext/wiki/ChangeLog because there are some incompatibilities with the previous versions.

We put Cherry On Ext on Google Code because this (by now) small project will eventually evolve with other features in the near future.

It contains:

• A filter utilities which allows:
  • dynamic or static filtering.
  • list of available values, both local and remote.
  • more than one way to edit the same filter. The whole thing is MVC based, and you can have different views on the same filter.
    For instance if you look at the example you can edit the filter clicking on the Filter button or using the context menu on the grid.
  • field type based operator list.
  • use a filter not coupled with the grid (we had some use cases where the user wants to define a filter but doesn't have a grid)
• A way to manage user preferences. A preference is more or less a state of the application as returned by a developer provided function
• The mask plugin already released (http://extjs.com/forum/showthread.ph...=InputTextMask)
• Some other minor utilities (a way to add a submenu to a menu, a way to easily manage a context menu on a grid and so on)

We tried to mantain whole documentation for the library API, and developed unit tests for each class without a GUI (for GUI classes we tried Selenium, but it's intended for integration test and we were not able to effectively use it for unit tests. Suggestions more than welcome).
You can grab a package with documentation and demo here:
http://code.google.com/p/cherryonext/downloads/list

To locally run the demo on your system you have to put the ext-2.0.1 directory (naming it ext) in the same place where you deflate the zip (if someone has a better idea on how to run the demos, please send suggestions).


The license is LGPL v3 or later (the same of Ext itself). Keep in mind that this is only version 0.1.1 and some bugs (even severe ones) are surelly around.

ChangeLog

• 0.3.0 A lot of bug fixes and some improvements
• 0.2.0 Bug fixes plus some improvements
• 0.1.1 Better date field editing (thanks to Jozef Sakalos)
• 0.1.0 Initial Release

[kenshin]

Very interesting... good work guy!

Thank's for sharing. :-)

[BlueCamel]

I really like the way the UI is implemented on this one. I have need to do a grid that uses:

• AutoGrid2 - get meta data from json
• Server side paging and sorting
• Filtering
• Saving of grid state between views.

I think I can reach this goal by combining autogrid2 with ext.cherry. Looks like I'm in for a long night of coding

[BlueCamel]

Hmm, so I took a closer look at AutoGrid2 and while nice, looks like it mainly is for saving and loading information on grid state on the server side. What I really want to do is have my backend generate the full grid metadata (column model, fields, and data).

[Attilio.Dona]

Cherry On Ext now allows to edit date fields using:

• Ext.ux.form.DateTime for values with date and time
• Ext.form.DateField for values with date only

See the "last updated" field on the static filter demo http://cherryonext.googlecode.com/sv...aticFilter.htm for an example of the new feature.

Many Thanks to Jozef Sakalos.

[BlueCamel]

Is there an example that shows how to apply this to a remote store? I've used the allTogether demo to apply quickFilter to my test grid. My test grid is a paging grid that uses a SQL backed JsonStore.

When applying the quickfilter using Ext.ux.netbox.core.LocalStoreFilterResolver() it only applies to the visible items in the grid, not the backend store.

Sure, based on the name of the method this is sort of expected So I'm looking for an example or hint on how to apply filters to the remote store.

Many thanks.

[dandfra]

You should change the filterTable function to something like this:

function filterTable(){
  store.load({params:{start:0, limit:25, filter: Ext.util.JSON.encode(filterModel.getFilterObj())}});
}

Then on the server you can create the sql where clause from the object.
I'm writing a PHP version of the filterResolver right now (we have a partial grails implementation too, but I don't know if it's so useful
It's against Oracle (9i or better) but I don't think it will need so many upgrades to work on other DB too (mainly to the date functions probably)

[BlueCamel]

I appreciate the hint, this is exactly what I needed. A PHP implementation of the filter resolver would be nice, if you can share your code.

[BlueCamel]

I've noticed the dialog for DynamicFilterModelView() allows you to apply filters that have an empty value. Is this expected behavior? Can it be controlled so that a value is always required?

A small nit about the demo. you can construct a dynamic filter and close the dialog without actually applying the dynamic filter. This leads to the case where:

1) Use quickFilter context menu to add a filter to an empty filterObject
2) Open DynamicFilterModelView() window and remove the filter
3) Close the filter window using the X button in the title bar
4) Grid is still filtered and context menu will not display the 'remove' options

Of course, this is purely a demo UI issue, not a bug within the Cherry filter implementation!

[BlueCamel]

One more suggestion, please. I don't think the getFilterMenu() and getRemoveFilterMenu() functions create a isToShow param. As a result, clicking on a col that isn't defined in filterModel results in an error if all you have in your context menu are the filter options.

I'm not quite sure what the intention of the get*Menu functions are so this may be working as designed.