PDA

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



Attilio.Dona
18 Feb 2008, 9:05 AM
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/svn/demos/demo/allTogether.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.php?t=21040&highlight=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
18 Feb 2008, 12:25 PM
Very interesting... good work guy!

Thank's for sharing. :-)

BlueCamel
18 Feb 2008, 3:37 PM
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
18 Feb 2008, 7:22 PM
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
20 Feb 2008, 2:15 AM
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/svn/demos/demo/staticFilter.htm for an example of the new feature.

Many Thanks to Jozef Sakalos.

BlueCamel
20 Feb 2008, 7:11 AM
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
20 Feb 2008, 7:32 AM
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
20 Feb 2008, 8:34 AM
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
20 Feb 2008, 8:24 PM
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
20 Feb 2008, 10:49 PM
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.

dandfra
21 Feb 2008, 1:06 AM
for the problem of quick filter on a column on which the filter is nto defined it is a bug. We are fixing it now. The methods you signaled are called to know if the submenus should be shown or not. Look at the documentation of ContextMenuManager for a better explanation
For the empty value, we ara actually defining it as <field> is null in the backend. What you probably want is a way to define a different default value, and a way to validate the input of the user. We will think to something (I don't know when)
For the demo we will fix it, but first we will correct the bug I think


Thanks for the feedback :)

BlueCamel
21 Feb 2008, 4:11 AM
Awesome. I really do like this way of filtering and I thank you for the quick responses.

Yes, I am doing validation on the backend in php when I generate the SQL WHERE clause. I would do this even if there was front end field validation. Of course, the big advantage of front end field validation is avoiding the AJAX call to do the validation.

I look forward to the patch for the context menu and will checkout SVN when it is available.

Again, thank you much!

bobbicat71
21 Feb 2008, 5:59 AM
The code on SVN repository (https://cherryonext.googlecode.com/svn/trunk) has been updated. Now the bug at contextMenu is resolved. Furthermore, the example "allTogheter" has been changed; was added a dialog asking the user whether or not to apply the filter if the filter's dialog is closed.

dandfra
21 Feb 2008, 7:59 AM
I wrote a little page on the wiki of the google code page and an example PHP implementation on the repository (linked from the wiki page).
The page is this one:
http://code.google.com/p/cherryonext/wiki/RemoteFiltersHowto

BlueCamel
21 Feb 2008, 10:50 AM
The code on SVN repository (https://cherryonext.googlecode.com/svn/trunk) has been updated. Now the bug at contextMenu is resolved. Furthermore, the example "allTogheter" has been changed; was added a dialog asking the user whether or not to apply the filter if the filter's dialog is closed.

Thanks bobbiecat. The SVN required a password on checkout. Is SVN open for anonymous read or should I wait for the next code drop?

dandfra
22 Feb 2008, 12:18 AM
http://code.google.com/p/cherryonext/source/checkout for explanation on howto access the code.
http://code.google.com/p/cherryonext/wiki/BuildHowTo for instruction on how to build a new packet
Ciao

BlueCamel
22 Feb 2008, 11:45 AM
http://code.google.com/p/cherryonext/source/checkout for explanation on howto access the code.
http://code.google.com/p/cherryonext/wiki/BuildHowTo for instruction on how to build a new packet
Ciao

Oh! Thank you very much. Unfortunetly, I am on Linux. I see the srcs dir with the .js files but not the main cherryonext.js and cherryonext-debug.js files. I guess those need Windows to build using JSBuilder?

dandfra
25 Feb 2008, 1:40 AM
Yes, it uses JSBuilder to build cherryonext.js and cherryonext-debug.js.
But if you want only produce a file that can be used in your development environment, waiting for a new cherry release (probably sometimes during this week, but this is not a promise), just use a script as the foillowing:


#/bin/sh
rm -rf cherry-unix.js
for file in `cat cherryonext.jsb | grep include | cut -d "=" -f 2 | cut -d " " -f 1 | tr \\\\\\\\ /`
do
echo $file | xargs cat >> cherry-unix.js
done


As you see it will produce a cherry-unix.js file that you can use insted of cherryonext.js (be aware: comments are not stripped away, the file is not miniefied and so on...)

mpanderson
3 Mar 2008, 3:28 PM
I really like the Cherry On Ext extension. It works great. I have had one issue that I cannot resolve. I am using the dynamic filter in a nested layout. On firefox (2.0.0.12) when an operator is selected from the combo box, the container scrolls to the top. The same thing can be duplicated using the dynamic demo on the website. If you open the demo in a short window that displays a window scroll bar, and scroll down some before opening the filter window popup, the browser scrolls to the top when an operator is selected. It does not do this for the value field, only the operator combo box.

Thanks.

mjlecomte
3 Mar 2008, 4:19 PM
This is a nice presentation of the filtering, I like it.

I haven't explored the code yet, so forgive the preemptive questions/suggestions/comments:

You comment about preferences gave me the idea where it would be nice to be able to load saved reports, either preconfigured by the developer, or added by the enduser. By "report" I'm basically thinking of a saved 'batch' of filters. So I guess might connect a store/reader to the filters or something.

This one is probably already in here somewhere but haven't explored further: If the column is using a renderer to transform values from say a field_id (stored in db) to a field description (shown for display in grid) than it would be nice to have the 'value' field for the filter dropdown have the rendered version instead of the field_id.

Final thought for the moment would be another toggle to choose if multiple sorts are combined by 'AND' or 'OR'.

fangzhouxing
3 Mar 2008, 10:12 PM
very nice!

dandfra
4 Mar 2008, 2:47 AM
@mpanderson: Here's the report of the bug: http://code.google.com/p/cherryonext/issues/detail?id=6
We will fix it in the next version

@mjlecomte: Added the enhancement request: http://code.google.com/p/cherryonext/issues/detail?id=7. If you look to the Charry On Ext code, the backand classes already manages AND/OR (and paranthesis too :). In our use cases (network assurance), there is a set of power users that creates a preference (A set of filters tipically), then this is exported to basic user, that can use it as is or modify it as needed (tipically using QuickFilter). So the preferences are there exactlly for the reason you outlined

@fangzhouxing: thanks :)

mpanderson
4 Mar 2008, 8:24 AM
Wow, that was quick. I love this extension, thanks for sharing it.

Phunky
5 Mar 2008, 2:29 AM
Loving this plugin :) thanks for the great work and i cant wait to put this into one of my apps :)

rep
5 Mar 2008, 1:52 PM
is somebody already working on extending the dynamicFilter Component to include AND/OR options? or has anything done already like this?

BlueCamel
12 Mar 2008, 5:35 PM
Any time soon for a bug fix release?

dandfra
13 Mar 2008, 1:42 AM
...and soon means 1 or 2 days.
It's feature complete, we are solving new (and old) bugs...
I don't trust it for a release in this moment, but it's nearing....
Just checkout from SVN if you want to have a better feeling...
Ciao

Attilio.Dona
14 Mar 2008, 7:03 AM
The latest 0.0.2 release is out. It contains bug fixing and some minor improvements, like visual filter validation, the enum field type and a better preferences error handling. Please see the ChangeLog http://code.google.com/p/cherryonext/wiki/ChangeLog because there are some incompatibilities with the previous versions.

BlueCamel
14 Mar 2008, 7:11 PM
Thanks much for the work guys! I'll download this and put it into my devel environment for testing.

komak
17 Mar 2008, 5:49 AM
Hi,
Thanks for this wonderful extension.
I'm looking for a CompositeFilter sample.
I'd like to implements 2 ways to make filters :
- Advanced mode : all fileds are detailled (ie one filed for name, another for company,...)
I implented that without difficult
- Simple mode : one filed for all columns (looking the same word on names or company, or...) with OR operator.
I dont understand how use CompositeFilter for that

Thanks in advance

dandfra
17 Mar 2008, 6:49 AM
I suppose you are using 2 filterModel, right? (Otherwise when you type in the field with the single value with all the columns you change the advanced filter too, which I don't think is what you want). If you want to compose the 2 filters (to have tha advanced and the basic together just call filterModel1.getFilterObj(false,filterModel2.getFilterObj(),Ext.ux.netbox.core.CompositeFilter.AND) when you pass the filter to the server)
Starting with this idea, this is what you should do (not tested, not run, I just wrote it here):

if the field is empty, you don't want to filter (I suppose): filterModel.setFilter(null)
if the field is not empty, you should create the filter. Do the following:


var fields=filterModel.getFieldManager().getAllFields();//get all the fields
var filter=null;
for(var i=0;i<fields.length;i++){

var elementaryFilter=fields[i].getElementaryFilterInstance();//create elementary filter. If you want an operator other than the default one pass the id of the operator as parameter
elementaryFilter.setValues([{value: <your value>,label: <yourLabel>}]);//set the value, it's on for string and number, for dates the default operation is DATE_PERIOD and the value should be one of the allowed periods (or maybe the operator should be different)
if(filter===null)
filter=elementaryFilter;
else {
filter=new Ext.ux.netbox.core.CompositeFilter(filter, Ext.ux.netbox.core.CompositeFilter.OR, elementaryFilter);
}
}
//here all that should be needed is filterModel.setFilter, but I forgot the method, and so I have to export and then reimport...
filterModel.setFilterObj(filterModel._encodeFilter(filter));

komak
17 Mar 2008, 12:26 PM
Fine !
I'm not sure to all understand but as soon as a i have tested this, i will let you know.
~o)

komak
17 Mar 2008, 2:56 PM
I tested your code. It works fine.
I adjusted juste a little thing :
in line
var elementaryFilter=fields[i].getElementaryFilterInstance();
I didn'd managed to set the id of the operator as parameter like
var elementaryFilter=fields[i].getElementaryFilterInstance("STRING_CONTAINS");
So I had to add :
elementaryFilter.setOperator("STRING_CONTAINS");

Thank you very much

BlueCamel
22 Mar 2008, 9:26 PM
I'm playing with the ContextMenuManager and adding my own menu items to the grid context menu. I'm not seeing how to get the name of the menu item clicked though? How can I find if 'statit' or 'sysstat -M' in my context menu was clicked from within the viewPerf function?



var contextMenuManager = new Ext.ux.netbox.ContextMenuManager({
menu:{
items:[{
text: 'View Perfstat',
menu: {
items:[
{text: 'sysstat -M', handler: viewPerf},
{text: 'statit', handler: viewPerf}
],
},
}, '-',
quickFilter.getFilterMenu(),
quickFilter.getRemoveFilterMenu()
]
}
});

function viewPerf(grid, row, col) {
var record = grid.getStore().getAt(row);
var iteration = record.get('iteration');
console.log('iter', iteration);
console.log('row', row);
console.log('col', col);
return;
}

dandfra
27 Mar 2008, 9:03 AM
Sorry for the delay in the answer, I was on eastern holiday, away and off line.
It's not possible to obtain the clicked item (I didn't think of this...).
Probably the best way should be to add a parameter to the handler... I will add it for the next version of cherry, but in the mean time just change line 109 of ContextMenuManager.js (or grab the last SVN version)


//Cherry Code:
//var handler=itemTmp.initialConfig.handler.createDelegate(scope,[grid, rowIndex, cellIndex],false);
//New Code:
var handler=itemTmp.initialConfig.handler.createDelegate(scope,[grid, rowIndex, cellIndex,itemTmp],false);


You will have a 4th parameter in your handler (the clicked item)

buenavida
10 Apr 2008, 11:12 AM
Hi guys,

Thanks for this excellent work. I am integrating your work on my project.

However, I am having a minor problem when trying to use availableValues from a remote Store.

My Store, returns correctly json data as follows :


{ results: [{"column1" : "value1", "column2" : "value2"}], totalRows: 1 }


I just could not get the combo box populated with the json data received from my server.

Could you give me a pointer / example of how to configure the store, when I want to use availableValues from remoteStore?

Many thanks.

Marty

dandfra
10 Apr 2008, 11:21 PM
{ results: [{"value" : "value1", "label" : "value2"}], totalRows: 1 }

Let me know if it works :)

buenavida
12 Apr 2008, 9:51 PM
Hi Danfra,

Thanks for the advice. I got it to work.

Best Regards
Marty

buenavida
14 Apr 2008, 8:41 AM
Hi Guys,

As I said, this ux is really great.

Any plan to extend the functionality so that a sortModel object can be supported also, something that sends to server a JSON like below:



[{order : 0,column : "SomeColumnName0", direction: "ASC"}, {order : 1,column : "SomeColumnName1", direction: "DESC"}]


If not, can you guys give me a pointer, if I would like to extend using DynamicFilterModel as a base to support the above?

Thanks and REgards
Marty

Attilio.Dona
15 Apr 2008, 10:52 PM
Hi Marty,

Your contribution is greatly appreciated!

We are thinking about the api and internal design of the sort model and then we share with you our proposal.

see you soon
Attilio

dandfra
16 Apr 2008, 12:56 AM
I thought a bit about your proposal but I don't understand what GUI you want to give to this multi column order feature.

I have 2 ideas:

global. Use something like the item selector (http://extjs.com/learn/Extension:Multiselect2) to choose the sort column (I don't know if you can have another column in the selected list)
PRO: in one action you can eassilly set the order
CONS: I don't know if it's the most usable solution
step by step: now, if you click on a column, it sorts it. If you click an already sorted column it sorts it in the opposite way. If you click on a column sorted descending it sorts it ascending. The idea could be to change this way:

first click sort ascending, second click sort descending, third click unsort
when you sort a column you add it to the sort, without removing th previuos sorted columns
you list somewhere (in the toolbar probably) the sorted columns

PRO: easy to use
CONS: to sort on 3 columns it sorts 3+ times, which can be a probelm if the query is slow


Without an idea of the GUI you need is a bit difficult to help or point you :-/

buenavida
16 Apr 2008, 7:44 AM
Hi Danfra and Atilio,

Thanks for your thoughts.

I am imagining that the sort order which will make up the ORDER BY part of the SQL, can be driven using something you guys have written.

A combo box, listing columns configured by using FilterConfig, however this combo box will represent sortable columns, which user can choose and the dynamic grid updated.

May be with an image will be easier to describe.

See attachement.

Bet Regards
marty

dandfra
17 Apr 2008, 8:34 AM
Sorry for the late reply but I'm very busy these days...

My suggestion is this one:

make a SortModel object, that has a Grid (probably as input in the constructor). It uses the grid for 2 reason:

obtain from the column model del list of the columns
list for the sortchange event
manage the sort properties in the store

This object mantains an array of sortInfo. (a sortInfo is an object with the keys field and direction).

The setSortInfos method has an array of sortInfos as input, sets the array, set the sortInfo in the store (setDefaultSort) if the sort is only on a column, reset them otherwise (store.sortToggle[store.sortInfo.field]=null; store.sortInfo=null; a method doesn't exist it seems), sets on the store some baseParams to send the new info to the server, fires the sortChanged event.
the getSortInfos returns the new infos
the getSortableColumns returns an array of columns on which the user can sort (using the ColumnModel to obtain them (id and label))

When the object detects the sortchange, it verifies if the sortInfo on the Store are equals to the one it mantains, and if not it update the sortInfos and fire the sortChanged event


The SortManager is used to fully manage the sort. Now you "only" need a view over this object. Since it's quite similar to the DynamicFilterManager you can start from here (http://code.google.com/p/cherryonext/source/browse/trunk/src/netbox/core/DynamicFilterModelView.js) throwing away a lot of code.
To fill the upper combo look at the createFieldCombo method, remembering that you must use the getSortableColumns method.


Sorry if this is a bit short, if you have some question please ask....

buenavida
19 Apr 2008, 8:52 AM
Hi guys,

I got the quick and dirty version to work for my application.

I am new to this style of development. So, i need the time to read your code and implement based on Danfra's pointers/ advice.

Anyway, thanks for the thought and the overview of the design.

Best Regards
Marty

vicirst
1 May 2008, 11:16 PM
Hi,

I found this plugin is very useful, however i'm running into problems.

Iam using your filter on server

Firebug POST:


filter {"fieldId":"name","operatorId":"STRING_EQUAL","values":[{"label":"Tonny","value":"Tonny"}]}


PHP CODE


$f = stripslashes($filter);
$f = json_decode($f, true);
$f = getSQL($f);


Firebug RESPONSE:
Fatal error: Function name must be a string in
test.php

if im filtering 2 columns (name and sex)
Firebug POST:


filter {"left":{"fieldId":"name","operatorId":"STRING_EQUAL","values":[{"label":"Tonny","value":"Tonny"}]},"logicalOperator":"AND","right":{"fieldId":"sex","operatorId":"NUMBER_EQUAL","values":[{"label":1,"value":1}]}}


Firebug RESPONSE:
(1=1 1=1)

Expected response something like:
name = "Tonny" and sex = "1"

I'm using PHP 5.2.3, extjs 2.0.1, cherryonext 0.2.0

why i can't get this to work ?

dandfra
5 May 2008, 4:42 AM
Try with the new one that it's here:
http://code.google.com/p/cherryonext/source/browse/trunk/test/PHPFilterResolver.php.

PS: We have an ASP.NET (SQL Server 2005) filter resolver. If someone is interested we can share it.

boggle
6 May 2008, 2:08 AM
Hi - I was about to start work on a c# port of this - if you have something to share I'd be a grateful recipient!

cheers

dandfra
12 May 2008, 4:09 AM
You can find it here (http://code.google.com/p/cherryonext/source/browse/trunk/test/FilterResolver.cs)

rtconner
21 May 2008, 10:39 AM
This thing is awesome. I have it running well. Thank you very much for writing it.

... but.. (sorry, always a but, isn't there?)
Well, what is the best api doc? The js docs don't seem to give me config options. What is the full list of config options?

For example, I can't figure out how to set "contains" as the default for a new dynamic filter that is a string. I assume there is a config option for this I can't locate.

dandfra
22 May 2008, 1:57 AM
We never needed it and so we didn't add the config option...
But it's quite easy to change the default operator using the API.

For example, if you have a field (=a column) ciccio, you can do the following:



var fieldManager=filterModel.getFieldManager();
var ciccioColumn=fieldManager.getField('ciccio');
ciccioColumn.setDefaultOperator(ciccioColumn.getOperatorById('STRING_CONTAINS'));


If you want STRING_CONTAINS as the default operator for every field of type string, you can do the following:


var fieldManager=filterModel.getFieldManager().;
var fields=fieldManager.getAllFields();
for(var i=0;i<fileds.count;i++){
if(fields[i] instanceof Ext.ux.netbox.string.StringField){
fields[i].setDefaultOperator(fields[i].getOperatorById('STRING_CONTAINS'));
}
}


For the API doc, yes, you are right, but it's a bit difficult to write an API and a good documentation together... Every help/suggestion is welcome :)

To open feature request (such as the availability of the config option to set the default operator) please use the Google Code page (http://code.google.com/p/cherryonext/issues/list)

NB: I haven't tried the code, but I think that it should work this way...

gthe
28 May 2008, 10:22 AM
Hi,

Sorry for my English.

I only start to work with etxjs and the first, which I have put your plug-in. All works well, but I had some questions:
1 - how to realize reset the button - i.e. to dump all fields in value null (as at opening page)
2 - I have arranged fields of search on the panel :


new Ext.Panel({
id : 'trapsFilterPanel',
layout : "fit",
title : 'Global Search (in database)',
height : 130,
region : "north",
split : false,
collapsible : true,
animCollapse:true,
animate: true,
collapsed: true,
items : [
{ filterModel: filterModel,
colsNumber:3,
labelWidth: 45,
labelAlign: 'top',
rowSize: 42,
ratio: 33,
labelPad: 1,
//region: "north",
//height:150,
xtype: 'staticFilter',
itemCls: 'filter',
buttons: [button2,button3]
}]In FF right after expanding of the panel it looks like in attach:

dandfra
29 May 2008, 3:01 AM
filterModel.setFilterObj(null) should reset all the fields
I never tried what you did but it seems a trouble with layouts... Form layout doesn't manage resize events (I never undestood why...), and so the lower layout doesn't update accordingly....
I think you should listen on the expand event of the panel, and call something like this.items.each(function(item){item.doLayout()});

For example:


new Ext.Panel({
id : 'trapsFilterPanel',
layout : "fit",
title : 'Global Search (in database)',
height : 130,
region : "north",
split : false,
collapsible : true,
animCollapse:true,
animate: true,
collapsed: true,
//modified here
listeners: {expand: {fn: function(){

this.findById('filter').items.each(function(item){item.doLayout()});
}}}, items : [
{ filterModel: filterModel,
colsNumber:3,
labelWidth: 45,
labelAlign: 'top',
rowSize: 42,
ratio: 33,
labelPad: 1,
//region: "north",
//height:150,
xtype: 'staticFilter',
itemCls: 'filter',
buttons: [button2,button3],
//modified here
id: "filter"
}]





I'm sorry I don't have much time to try your second issue, I'm very busy in this period.
Let me know if my suggestions work. Ciao

gthe
29 May 2008, 3:43 AM
Let me know if my suggestions work. Ciao
All work fine exept this (again in ff only) in atach (combo list width <> combobox width)

Many thanks!!!

dandfra
29 May 2008, 4:13 AM
listeners: {expand: {fn: function(){

this.findById('filter').items.each(function(item){item.doLayout()});
var components=this.findBy(function(component){
if(component instanceof Ext.form.TriggerField)
return(true);
});
for(var i=0; i<components.length;i++){
components[i].onResize();
}
}}},

Try with the above code

gthe
29 May 2008, 7:17 PM
Now all work fine!
Thanks!

rtconner
10 Jun 2008, 3:26 PM
Might I ask.. why is the data stored in a left/right node tree like manner? What is the advantage of this over .. say a linear array? Maybe even I could see a mutil-demensional array. But why are we limiting it to just two nodes per leaf?

It really seems to add a layer of diffuculty to work with this that is just not needed.

dandfra
10 Jun 2008, 11:32 PM
This is not the first time we did a filter widget, and the first time we used an array to store the elementary filters. Than we was asked the possibility to mix AND/OR boolean operator, and to use brackets. For example:

(( A AND B ) OR C ) AND ( D OR E )

With an array as storage this become a nightmare, because moving or matching brackets became very difficult....
With a tree storage it's easier to resolve the filter taking into account brackets

For example the above expression becomes:




AND
|
OR-+---OR
| |
AND-+-C D-+-E
|
A-+-B

which is quite easy to resolve...
I don't know if we will implement brackets and so on, but since in the previous (non Ext) version it was asked in at least 3 different context...

dante
13 Jun 2008, 1:13 AM
Hi, I think your example PHP-implementation (http://code.google.com/p/cherryonext/wiki/RemoteFiltersHowto) which processes the filter object does not support more than two filters at a time? One will need a function which recursively processes the filter object in order to construct a SQL statement containing more than two filter settings. Just wanted to ask if there already is one as otherwise i'm gonna write one myself. I can of course share it afterwards if you're interested.

dandfra
13 Jun 2008, 3:16 AM
The filter should be resolved even if you have more than 2 conditions since the function recalls recoursivelly itself (look at line 287 and 288 of PHPFilterResolver.php). We use the resolver with *very* complicated expressions with tens of conditions...
If you have some problems, can you post herethe JSON encoded filter that is failing for you?

dante
13 Jun 2008, 5:39 AM
Hi dandfra, I'm sorry, it all works very well.. I just did not realize at first sight that your method already works recursively. Do plan to implement also OR as an operator in the near future? Very nice plugin, many thanks for sharing.

donssmith
13 Jun 2008, 11:56 AM
Do you have the C# code to convert the JSON filter object to a dictionary that your C# FilterResolver (http://code.google.com/p/cherryonext/source/browse/trunk/test/FilterResolver.cs) class can consume?

dandfra
16 Jun 2008, 1:01 AM
I use this one:
JavaScriptSerializer (http://msdn.microsoft.com/en-us/library/system.web.script.serialization.javascriptserializer.aspx)

The code I use is something like this:

IDictionary filter = jss.Deserialize<Hashtable>(Request.Params.Get("filter"));

donssmith
19 Jun 2008, 10:51 AM
Thanks. Works perfect!

donssmith
20 Jun 2008, 6:56 AM
I currently have an app that I'm using cherry on ext with. I need to be able to dynamically change the filter on the fly when the content of the grid changes. Basically I'm using the grid as a report and the user has the ability to select among 20+ reports. So when they click on the report the data is displayed in the grid and the filtered fields need to change as well.

It would be nice if cherry on ext had a reconfigure method that accepted a config object or something, which would delete any existing filter fields and add the new ones defined in the config object. Do you have any suggestions that would work with the existing code base?

dandfra
20 Jun 2008, 7:10 AM
Try with something like this (not tested, it's only to give you an idea, but I think that it should work):

filterModel.setFilterObj(null);//I don't think that changhing the fields when there is a filter is a guood idea
var fieldManager=filterModel.getFieldManager();//fieldManager contains the definition of all the fields...
fieldManager.removeField(fieldManager.getFieldById('<insert the id of your field here>');
fieldManager.removeField(fieldManager.getFieldById('<insert the id of your field here>');
fieldManager.removeField(fieldManager.getFieldById('<insert the id of your field here>');
....
fieldManager.removeField(fieldManager.getFieldById('<insert the id of your field here>');
//now you have to recreate the fields. Here it's a bit hackish, since I don't have an explicit method. The better way is to just copy some code from the FieldManager constructor
from line 40 to line 81, remembering to change this.addField(field); with fieldManager.addField(field) on line 81

To have a reconfig method (probably a setFilterManager method on filterModel) please insert a geature request on Google Code. I'm a bit busy now, but i'll implement it before or later probably

donssmith
20 Jun 2008, 8:14 AM
I actually started down the path you suggested and decided to post a message to you guys to see if there was already something I could use. I'll give it a shot and let you know how it goes. Thanks

jwendt@iscinternational.com
24 Jun 2008, 7:51 AM
I easily implemented filtering and quick filtering into my application. Works like a charm!

Now its time to go after preferences. I searched the form and ppoured through the documentation, but haven't found answers. I'm using php/mysql on the backend, and would like to have users save their own custom preferences.

My question is what method would I use to get the current view to pass to the database?

Thanks for all of your hard work.

dandfra
24 Jun 2008, 8:08 AM
...because different users in the same "group" shares the preferences, and so I don't think that it can be used in general... And now I'm developing using C# on the backend and we are not using preferences ATM (only filters)
But in general, I think that you need a table with these fields:
userId
prefId
preferenceName
preferenceDescription
preferenceText

PreferenceText should be a clob or something like this.
Now you have to write some services that read and writes this table. You can find a description of the API that this services should expose looking at the documentation of the constructor of PreferenceManager. If you look at the file simulateAjaxCall.js you can see some simulated call to this function. Putting some breakpoints there should give you some other hint about the API.
Basically the API lists the table, read, update/insert and delete a record, so it should be quite easy to implement
PS: If you develop an general porpuse implementation, please share, we will add it to the Google Code wiki :D

jwendt@iscinternational.com
24 Jun 2008, 9:45 AM
Wow!

That was unbelievably simple!

I'm even more impressed.

donssmith
25 Jun 2008, 7:01 AM
@dandfra

If you're interested here's the code I ended up adding to reconfigure the field manager and dynamic filter on the fly. Once I dug into the cherryonext code it ended up being pretty easy to do.

In Ext.ux.netbox.core.FieldManager I moved the if section of code below from the constructor into a configure function. The constructor now calls this. The new reconfigure function removes the existing fields and calls configure.


Ext.ux.netbox.core.FieldManager
...
configure: function(config) {
if(config!==undefined){
for(var i=0; i< config.length; i++){
var field;
if(config[i].type===undefined){
config[i].type="string";
}

switch(config[i].type){
case "string":
field=new Ext.ux.netbox.string.StringField(config[i].id,config[i].label);
break;
case "enum":
field=new Ext.ux.netbox.string.EnumField(config[i].id,config[i].label);
break;
case "float":
case "int":
field=new Ext.ux.netbox.number.NumberField(config[i].id,config[i].label);
break;
case "date":
field=new Ext.ux.netbox.date.DateField(config[i].id,config[i].label,config[i].format);
break;
default:
continue;
}
if(config[i].availableValues!==undefined){
field.setAvailableValues(config[i].availableValues);
if(config[i].remoteStore!==undefined){
field.setStoreRemote(config[i].remoteStore);
}
if(config[i].type=="string" || config[i].type=="enum"){
field.addOperator(new Ext.ux.netbox.string.StringListOperator('STRING_LIST',field.stringListText));
field.addOperator(new Ext.ux.netbox.string.StringListOperator('STRING_NOT_IN_LIST',field.stringNotListText));
}
}
if(config[i].defaultValues!==undefined)
field.setDefaultValues(config[i].defaultValues);
if(config[i].forceReload!==undefined)
field.setForceReload(config[i].forceReload);
if(config[i].validate!==undefined)
field.setValidateFn(config[i].validate);

this.addField(field);
}
}
},

reconfigure: function(config) {
for (var i=this.fields.items.length-1; i >= 0; i--) {
this.fields.removeAt(i);
}
this.configure(config);
}


I'm also using the dynamic filter so in Ext.ux.netbox.core.DynamicFilterModelView I added the reconfigure function below.


Ext.ux.netbox.core.DynamicFilterModelView
...
reconfigure: function() {
this.fieldStore.removeAll();
var allFields=this.getFilterModel().getFieldManager().getAllFields();
this.addFields(allFields);
},

jwendt@iscinternational.com
26 Jun 2008, 1:21 PM
The preferences are working perfectly in IE but I am having a problem if Firefox. After saving or deleting a preference, the loading mask does not get removed?

Any ideas?

dandfra
1 Jul 2008, 7:49 AM
Do you have some more detail?

mask_hot
2 Jul 2008, 7:18 AM
Hi Dandfra,

I use the cherryonext plugin and I got an issue.

I configured the followed filterModel:


this.filterModel = new Ext.ux.netbox.core.FilterModel(
[
{id: 'id_update', label: 'ID', type:'int'},
{id: 'dt_update', label: 'Date ', type: 'date', format: 'd/m/Y h:i:s' },
{id: 'dt_done', label: 'Date done', type: 'date', format: 'd/m/Y h:i:s'},
{id: 'status', label: 'Status', type: 'enum'
, availableValues:new Ext.data.SimpleStore(
{
fields: ['label', 'value'],
data: [
["ERROR", "ERROR"],
["DONE", "DONE"],
["ON HOLD", "ON HOLD"],
["TO DO", "TO DO"],
["PENDING", "PENDING"]
]
}), remoteStore: false},
{id: 'bat_reference',label: 'Bat Ref'},
,
{id: 'task_name', label: 'Task',type: 'enum'
, availableValues:new Ext.data.JsonStore(
{
id:'id_task'
,root:'rows'
,totalProperty:'total'
,url:this.url
,baseParams:{task:'getData', objName:'mpdi_task'}
,fields:[
{name: 'label', type: 'string', mapping:'task_name'},
{name: 'value', type: 'int', mapping:'id_task'}
]
})
, remoteStore: true
},
{id: 'comments', label: 'Comments'}

]);


The combo with the remote jsonstore is well loaded but when I select a value, with the equal operator, I got this message in Firebug:



file: Andrie select.js

v.split is not a function
onSelect(Object id=4 data=Object json=Object store=Object, 3)fetchResource.php... (line 619)
onViewClick(Object initialConfig=Object tpl=Object singleSelect=true, 3, div.x-combo-list-item, Object browserEvent=Event mouseout button=0 type=mouseout)fetchResource.php... (line 702)
Observable()ext-all.js (line 12)
Observable()ext-all.js (line 12)
initComponent(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all.js (line 83)
EventManager()ext-all.js (line 13)
getViewWidth()ext-base.js (line 10)
[Break on this error] v = v.split(String(this.separator));



If I try with IN or NOT IN operators it works well.

With does it try to split a single value?

thanks for your help

durlabh
2 Jul 2008, 7:42 AM
mask_hot, Make sure your values are string instead of number and it should work fine.

dandfra
2 Jul 2008, 8:46 AM
I slightly refactored your patch (with my changes the reconfigure method in DynamicFilterModelView is no longer needed), added some automatic test/documentation etc and committed to the repository.
Thanks :)

dandfra
2 Jul 2008, 9:04 AM
I think that durlabh is right, the returned json contains numbers and not string.
The reason it tries to split a single value is that we didn't want 2 classes to manage combos, and so we used Ext.ux.Andrie.Select in the single case too, since Ext.ux.Andrie.Select manage single selection too. I don't know what we will use in the feature since Ext.ux.Andrie.Select is actually deprecated (look at the thread).

mask_hot
2 Jul 2008, 11:47 PM
mask_hot, Make sure your values are string instead of number and it should work fine.


thanks! it works perfectly now!

pietas
2 Jul 2008, 11:49 PM
Related to mask_hot's question:

I have the same issue with client-side filtering using ENUM types (server-side I can sort using something like isNumeric functionality). Only string values are returned as value but I need numeric values (integer). Filtering fails because the numeric value and string format don't macth up (123 <> '123')

The structure I use for my enum type is that of a foreign key lookup in a relational DB table (SQL Server). Therefor my values will always be numeric (auto-number unique identifier unless I use GUID type for table).

How can I go about sorting this?

dandfra
3 Jul 2008, 12:38 AM
If so, the problem is that LocalStoreFilterResolver.js uses === and not == in filterStringEquals.
Try this one:


MyLocalStoreFilterResolver = Ext.extend(Ext.ux.netbox.core.LocalStoreFilterResolver, {
filterStringEquals: function(record, value,column){
return(record.get(column)==this.calcolateValue(value));
}
});


and then you use MyLocalStoreFilterResolver.
Then in the list of available values you can return strings, and in the store number and it should work.
Let me know if it works.

pietas
3 Jul 2008, 1:21 AM
Thank you. Works fine. Changed return statement in cherryonext.js and that worked fine for me. Will implement properly know

Something else: asked a co-workers view of the filter implentation and he didn't know what '!=' means as an operator. Fortunately it is easy to change the wording for the operator into 'Not Equal'.

wasp
3 Jul 2008, 1:28 AM
Possibly a bug: on the demo, when I select multiple rows and then add quickfilter with "!=" , it only applies the last selected row, not all selected.

Edit. Actually it applies on the row that you right-clicked to. Does not gets the selection at all

durlabh
3 Jul 2008, 9:10 AM
The preferences are working perfectly in IE but I am having a problem if Firefox. After saving or deleting a preference, the loading mask does not get removed?

Any ideas?

I'm running into the same issue!!! Can't provide a test case yet as the grid I've is quite complex and uses a lot of stuff :(

dandfra
7 Jul 2008, 5:44 AM
I looked at the code and found a bug, I don't know it it's related to your problem or not, but maybe yes.
The method getAllPreferences of PreferenceManager is this one:

getAllPreferences : function(){
if(this.store === undefined){
this.store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: this.getAllPrefURL
}),
baseParams: {id: this.id, userName: this.userName},
autoLoad: true,//<--look at this line
reader: new Ext.data.JsonReader({
root: 'preferences',
totalProperty: 'totalCount',
fields: [
'prefId',
'prefName',
'prefDesc',
{name: 'isDefault', type: 'boolean'}
]
})
});
this.store.on("loadexception",this._loadExceptionCbk,this);
this.store.setDefaultSort('prefName');
}
return this.store;
}
The autoLoad: true is wrong (I don't know why I wrote that), and it results in a double call to the load method of the store. I think that in some cases the second call interferes with the first and so the mask never disappears. Please try to comment the line and let me know if it solves your problem.

anghuda
7 Jul 2008, 5:51 AM
Dandfra,
I use your UX and use PHPFilterResolver within my Zend Framework application and get this message:


<b>Fatal error</b>: Function name must be a string in PHPFilterResolver.php on line 287.

This is my code:



$filter_str = stripslashes( $request->getParam('filter'));
$filter_obj = Zend_Json::decode( $filter_str, Zend_Json::TYPE_OBJECT);

$filter = getSQL( $filter_obj );
Line 287 on PHPFilterResolver.php is :



return($mapping[$filterObj->operatorId]($filterObj->fieldId,$filterObj->values));
what wrong, please ...
thanx.

ang

NB. Your PHPFilterResolver.php works fine without Zend Framework.

dandfra
7 Jul 2008, 7:38 AM
A wild guess from the error is that Zend Framework overwrites $mapping (I don't know Zend Framework so this is a guess)
A quick solution is to change $mapping in something else ($myMappingWhichZendDoesntOverwrite or something like this in PHPFilterResolver.php).
A better solution is to transform the filter resolver in a class, so that the mapping variable is not global (in that case please post your code here :)

Let me know if it works

anghuda
7 Jul 2008, 7:54 AM
A wild guess from the error is that Zend Framework overwrites $mapping (I don't know Zend Framework so this is a guess)
A quick solution is to change $mapping in something else ($myMappingWhichZendDoesntOverwrite or something like this in PHPFilterResolver.php).
A better solution is to transform the filter resolver in a class, so that the mapping variable is not global (in that case please post your code here :)

Let me know if it works

Thank you Dandfra four quick response.
Using $myMappingBlah is not work, but when I put array of $mapping inside function like this :



function getSQL($filterObj){

$mapping=Array(
'NUMBER_EQUAL' => 'number_equals',
'NUMBER_NOT_EQUAL'=> 'number_differents',
'NUMBER_GREATER'=> 'number_greater',
'NUMBER_GREATER_OR_EQUAL'=> 'number_greater_or_equal',
'NUMBER_LESS'=> 'number_less',
'NUMBER_LESS_OR_EQUAL'=> 'number_less_or_equal',
'NUMBER_RANGE'=> 'number_range',
'STRING_EQUAL'=> 'string_equals',
'STRING_DIFFERENT'=> 'string_different',
'STRING_CONTAINS'=> 'string_contains',
'STRING_DOESNT_CONTAIN'=> 'string_doesnt_contains',
'STRING_STARTS_WITH'=> 'string_starts_with',
'STRING_ENDS_WITH'=> 'string_ends_with',
'STRING_LIST'=> 'string_list',
'STRING_NOT_IN_LIST'=> 'string_not_in_list',
'DATE_EQUAL'=>'date_equal',
'DATE_GREATER'=>'date_greater',
'DATE_GREATER_OR_EQUAL'=>'date_greater_or_equal',
'DATE_LESS'=>'date_less',
'DATE_LESS_OR_EQUAL'=>'date_less_or_equal',
'DATE_RANGE'=>'date_range',
'DATE_PERIOD'=>'date_period'
);

if($filterObj==null)
return("1=1");
if(isset($filterObj->operatorId)){
return ($mapping[$filterObj->operatorId]($filterObj->fieldId,$filterObj->values));
} else {
$leftSql=getSQL($filterObj->left);
$rightSql=getSQL($filterObj->right);
return("(".$leftSql." ".$filterObj->logicalOperator." ".$rightSql.")");
}
}


that works!

ang

durlabh
7 Jul 2008, 5:27 PM
I looked at the code and found a bug, I don't know it it's related to your problem or not, but maybe yes.



The autoLoad: true is wrong (I don't know why I wrote that), and it results in a double call to the load method of the store. I think that in some cases the second call interferes with the first and so the mask never disappears. Please try to comment the line and let me know if it solves your problem.

Hi,

autoLoad: true is a problem for double call. However, the mask issue happens only when you save a new preference or delete. This happens because you add the mask in beforeLoad event of the store whereas mask is removed only in resetMenu method which doesn't get called when you save a new preference or delete.

I can do a quick fix but instead I would like to have the patch applied in the code base so that it is fixed for everyone and I'm using the build/ code from google code repository.

Let me know what you think.

Thanks,

Durlabh

durlabh
8 Jul 2008, 3:17 PM
I think I found the issue for Firefox masking bug. isMasked() property in resetMenu isn't working properly when menu is hidden. When I removed the check for isMaked(), it works fine. Can others confirm please?

gthe
8 Jul 2008, 11:44 PM
filterModel.setFilterObj(null) should reset all the fields......


Sorry for my English.

With this code fileds are replaced with [&nbsp;], which cause error in IE when panel with this filters are colapsing/expanding.
One more bugs. In static filter example from CherryOnExt-0.2.0.zip (http://cherryonext.googlecode.com/files/CherryOnExt-0.2.0.zip)bug with date filter.
1 - Try to select filter "=" or ">=" and then unselect. Fileds for input date are visible;
2 - Try to input date or time - Date will be wrong and time will be always 00:00.
With example on http://cherryonext.googlecode.com/svn/demos/demo/staticFilter.htm this mistakes disappears.

If to you it will be more convenient - I can post screenshots.

Thanks.

dandfra
8 Jul 2008, 11:55 PM
Ok, I was finally able to reproduce the bug (not always, only sometime), and I can confirm your fix. It's already in SVN. Thanks a lot :)

dandfra
9 Jul 2008, 12:05 AM
The bug with &nbsp; is already fixed in SVN (I had it too). The file is StaticFilterModelView.js
For the second, are you using ext-2.1? Because maybe I had the same problem, and it's an ext bug. Here the thread (with a fix) http://extjs.com/forum/showthread.php?t=33112

gthe
9 Jul 2008, 2:21 AM
The bug with &nbsp; is already fixed in SVN (I had it too). The file is StaticFilterModelView.js
For the second, are you using ext-2.1? Because maybe I had the same problem, and it's an ext bug. Here the thread (with a fix) http://extjs.com/forum/showthread.php?t=33112

Yes, I have ext-2.1


Sorry for my English.

With this code fileds are replaced with [&nbsp;], which cause error in IE when panel with this filters are colapsing/expanding.
One more bugs. In static filter example from CherryOnExt-0.2.0.zip (http://cherryonext.googlecode.com/files/CherryOnExt-0.2.0.zip)bug with date filter.

With svn version no nbsp;, but error when colapsing/expanding filter's panel in IE stay. Will try debug it.


1 - Try to select filter "=" or ">=" and then unselect. Fileds for input date are visible;

This bug in http://cherryonext.googlecode.com/svn/demos/demo/staticFilter.htm too.

Thanks.

gthe
9 Jul 2008, 3:04 AM
The bug with &nbsp; is already fixed in SVN (I had it too). The file is StaticFilterModelView.js
For the second, are you using ext-2.1? Because maybe I had the same problem, and it's an ext bug. Here the thread (with a fix) http://extjs.com/forum/showthread.php?t=33112

Yes, I have ext-2.1


Sorry for my English.

With this code fileds are replaced with [&nbsp;], which cause error in IE when panel with this filters are colapsing/expanding.

With svn version no nbsp;, but error when colapsing/expanding filter's panel in IE stay. Will try debug it.
Here is my staticFilter.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Static Filter Demo</title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../resources/cherryonext.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../cherryonext.js"></script>

<link rel="stylesheet" type="text/css" href="myStylesheet.css" />
<script type="text/javascript" src="mydata.js"></script>

<style TYPE="text/css">
.filter { font-size: 11px; }
.centerCls {vertical-align: middle;}
</style>


<script language="JavaScript" type="text/javascript">
var fieldManager;
var filterModel;
var localFilterResolver;
var filterObject;

Ext.BLANK_IMAGE_URL="../ext/resources/images/default/s.gif";
var availableValuesStore=new Ext.data.SimpleStore({fields: ['label', 'value'],
data: [
["Yes","0"],
["No","1"],
["I don't remember","2"]
]});
Ext.onReady(function(){
Ext.QuickTips.init();
var filterCfg=[
{id: 'company',label: 'Company'},
{id: 'price',label: 'Price', type: 'float'},
{id: 'change',label: 'Change', type: 'float'},
{id: 'pctChange',label: '% Change', type: 'float'},
{id: 'lastChange',label: 'Last Updated', type: 'date', format: 'd/m/Y H:i'},
{id: 'inPortfolio',label: 'In Portfolio', type: 'enum', availableValues: availableValuesStore, remoteStore: false}
];

fieldManager=new Ext.ux.netbox.core.FieldManager(filterCfg);
filterModel=new Ext.ux.netbox.core.FilterModel(fieldManager);
localFilterResolver=new Ext.ux.netbox.core.LocalStoreFilterResolver(filterModel);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 95, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y H:i'), dataIndex: 'lastChange'},
{header: "In Portfolio", width: 85, sortable: true, renderer: inPortfolio, dataIndex: 'inPortfolio'}
],
stripeRows: true,
plugins: [new Ext.ux.netbox.core.FilterHeaderPlugin(filterModel)],
autoExpandColumn: 'company',
region: "center"
});
filterObject={fieldId:"company", operatorId:"STRING_STARTS_WITH", values:[{label: "A",value:"A"}]};
filterModel.addElementaryFilter(filterObject);
var button2=new Ext.Button({text: "Apply"});
var button3=new Ext.Button({text: "Clear"});
button2.on("click",filterTable);
button3.on("click",clearfilter);
var panel = new Ext.Panel(
{layout: "border",
width: 800,
height: 550,
items: [
{
id : 'pn_rule_filter_grid',
stateid :'stateid_panel_rile_grid',
layout : "fit",
title : 'Global Search (in database)',
height : 210,
region : "north",
split : false,
collapsible : true,
animCollapse:true,
animate : true,
collapsed : true,
listeners : {expand: {fn: function(){
this.findById('filterss').items.each(function(item){item.doLayout()});
var components=this.findBy(function(component){
if(component instanceof Ext.form.TriggerField)
return(true);
});
for(var i=0; i<components.length;i++){
components[i].onResize();
}
}}},
items : [{ filterModel: filterModel,
id : 'filterss',
colsNumber:2,
labelWidth: 55,
labelAlign: 'top',
rowSize: 45,
ratio: 33,
labelPad: 1,
//region: "north",
//height:190,
xtype: 'staticFilter',
itemCls: 'filter',
buttons: [button2, button3]
}]},
grid
]
}
);
panel.render("mettiloQui");
});

function filterTable(){
store.filterBy(localFilterResolver.filter,localFilterResolver);
};

function clearfilter(){
filterModel.setFilterObj(null);
}
</script>
</head>
<body>
<h1> Static Filter </h1>
<p> In this demo you can add or remove filters on the table using the form above the table and then pushing the Apply button</p>
<div id="mettiloQui"></div>
</body>
</html>
Steps in IE only:
1-Expand north panel with filters;
2-In field "In Portfolio:" select "="
3-Press Clear button
4-collapse panel
5-try to expand panel - error popup



1 - Try to select filter "=" or ">=" and then unselect. Fileds for input date are visible;

This bug in http://cherryonext.googlecode.com/svn/demos/demo/staticFilter.htm too.

Thanks.

dandfra
9 Jul 2008, 8:11 AM
Yes, I have ext-2.1
Steps in IE only:
1-Expand north panel with filters;
2-In field "In Portfolio:" select "="
3-Press Clear button
4-collapse panel
5-try to expand panel - error popup


This bug in http://cherryonext.googlecode.com/svn/demos/demo/staticFilter.htm too.

Thanks.
It was a bug of DateTime. I fixed it in SVN. I'll try to contact jsakalos to try a merge upstream. Thanks for the report :)

johnstontrav
17 Jul 2008, 12:21 AM
Hi,

Im having an issue getting the filtered data posted.

Everything seems to be working. But when i hit the "Apply" button and check FF console the "filter" param is set to "null"

Here is part of the code...




...
var filterCfg=[
{id: 'descr',label: 'Type'}
];

//FilterModel
filterModel=new Ext.ux.netbox.core.FilterModel(filterCfg);


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

Ext.apply(this, {
store: this.store
,cm:cm
,plugins: [new Ext.ux.netbox.core.FilterHeaderPlugin(filterModel)]
...

Let me know if you need some more code to help troubleshoot.

Any assistance would be great.

Cheers,
Trav

dandfra
17 Jul 2008, 12:41 AM
Are you sure you are using the right filterModel? This is the only thing I can think...
BTW, if you paginate, the right way is the following:



store.baseParams=Ext.apply(store.baseParams,{filter: Ext.util.JSON.encode(filterModel.getFilterObj())}); store.load({params: {start:0, limit: 20}});


Otherwise the filter will be lost paginating...

johnstontrav
17 Jul 2008, 12:54 AM
thanks dandfra that worked!!!

phedoreanu
17 Jul 2008, 6:51 AM
Hello,

I found a bug (IE and FF):

1. You add a filter with a correct value.
2. You add another filter, leave the value blank and change the operator. Then the css class of the row changes to 'x-grid3-row-notValid'.
3. You add another filter with or without a value
4. Click 'Apply'. It filters the grid but when you try to delete the middle filter it throws a javascript exception



[Exception... "'Unable to remove the elementaryFilter with id inPortfolio2. The elementaryFilter doesn't exist' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]
Now even if you add a correct value to that filter, the 'x-grid3-row-notValid' class is removed still throws that exception.

This bug in http://cherryonext.googlecode.com/svn/demos/demo/allTogether.htm

dandfra
17 Jul 2008, 6:55 AM
Thanks for reporting :)

johnstontrav
17 Jul 2008, 5:59 PM
maybe a simple issue here but i can't seem to solve it.

after i select a date (eg 18/07/2008) form date dropdown it converts it to 07/03/1935 and if i change the format to 'd-m-Y' the date is removed onBlur.


var filterCfg=[

{id: 'date',label: 'Date', type: 'date', format: 'd/m/Y'}
];


Anyone got any ideas?

mystix
17 Jul 2008, 6:01 PM
@johnstontrav, try this:
http://www.extjs.com/forum/showthread.php?p=156047#post156047 (http://www.extjs.com/forum/showthread.php?t=33112)

[edit]
note: provided patch is for Ext 2.1

johnstontrav
17 Jul 2008, 6:39 PM
awesome! thanks mystix.

johnstontrav
17 Jul 2008, 6:50 PM
one more question....

The quick filter menu is not showing on any enum fields. Is that by design or have i missed another thing! :)

dandfra
17 Jul 2008, 11:30 PM
For example in the demo (http://cherryonext.googlecode.com/svn/demos/demo/allTogether.htm) the In Portfolio column is an enum.
If it doesn't work for you please post some more detail...

phedoreanu
18 Jul 2008, 2:35 AM
you're running Ext 2.1 right ? :D

rollback to Ext 2.0.1 or 2.0 and it will work..i had exactly the same issue.

phedoreanu
18 Jul 2008, 6:51 AM
How can I disable dynamically the operator comboBox on a specific row ?

8175

If I add that line all the filters will have that comboBox disabled :)


var operatorCombo=new Ext.form.ComboBox({
store : this.operatorStore,
mode : 'local',
valueField : 'operatorId',
displayField : 'operatorLabel',
editable : false,
triggerAction : 'all',
lazyRender : true,
listClass : 'x-combo-list-small'
,disabled:true
});If I add

onFilterAdded : function(filterModel, filter){
filter.getOperator().getEditor().disable();
...
}it disables the next comboBox :((

8176


I also tried to use getOperatorCombo() method, but I failed :(

I tried to modify the editor on the columnModel:

cm.getCellEditor=function(colIndex, rowIndex){
if(rowIndex == 0 && colIndex == 2) {
'something'
}
if(colIndex==3){
var filter=this.filterStore.getAt(rowIndex).get('filter');
var operator=filter.getOperator();
return(operator.getEditor());
} where I failed, because I didn't know what code to execute in that block :(


Help ? 8-|

johnstontrav
18 Jul 2008, 1:52 PM
yep running 2.1. But i think the demos are also using 2.1. I don't really want to roll back. I will keep looking for a solution. Thanks for the tip though, it will help to narrow down the issue.

phedoreanu
18 Jul 2008, 3:12 PM
http://cherryonext.googlecode.com/svn/demos/ext/ext-all.js


/*
* Ext JS Library 2.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

dandfra
21 Jul 2008, 12:14 AM
Since DynamicFilterModel extends grid, I think the best way is to do something like this:


dynamicFilterModel.getColumnModel.isCellEditable=function(colIndex, rowIndex){
if(colIndex==2){//operator column, insert here your custom logic
}
return(Ext.ux.netbox.core.DynamicFilterModelView.isCellEditable.call(this,colIndex, rowIndex));
}

Ciao

dandfra
21 Jul 2008, 12:22 AM
I'm running ext 2.1 here and it works...
Can you please post a self contained example?

dandfra
21 Jul 2008, 2:12 AM
Hello,

I found a bug (IE and FF):

1. You add a filter with a correct value.
2. You add another filter, leave the value blank and change the operator. Then the css class of the row changes to 'x-grid3-row-notValid'.
3. You add another filter with or without a value
4. Click 'Apply'. It filters the grid but when you try to delete the middle filter it throws a javascript exception



[Exception... "'Unable to remove the elementaryFilter with id inPortfolio2. The elementaryFilter doesn't exist' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]
Now even if you add a correct value to that filter, the 'x-grid3-row-notValid' class is removed still throws that exception.

This bug in http://cherryonext.googlecode.com/svn/demos/demo/allTogether.htm

The bug is fixed in SVN. The modified file is FilterModel.js. Thanks again for reporting

phedoreanu
21 Jul 2008, 3:47 AM
I'm running ext 2.1 here and it works...
Can you please post a self contained example?

example of custom code or of the whole code or what ?

dandfra
21 Jul 2008, 3:58 AM
On the sample page wih ext 2.1 the quick filter with the enum field works. What is different in your case? The best is a whole (little) application that shows the problem so that I can answer this question.

phedoreanu
21 Jul 2008, 4:06 AM
There's nothing wrong with it.

I only wanted to disable that particular cell on that particular row :)

I did it like you suggested


cm.isCellEditableOrig = cm.isCellEditable;
cm.isCellEditable=function(colIndex, rowIndex){
if(rowIndex == 0 && colIndex == 2) {
return false;
}
return (this.isCellEditableOrig(colIndex, rowIndex));
}


Thanks :)

dandfra
21 Jul 2008, 4:11 AM
I was referring to the problem of the quick filter with enum fields... A bit of misunderstanding it sems :)

phedoreanu
21 Jul 2008, 11:37 PM
I've uploaded a full working example :)

Test case:

1. Select 'Last Updated' filter
2. Operator '='
3. Select a date using the DatePicker button
4. Focus on the grid then focus again on the DateField.
The date will automatically change :-/


8246

phedoreanu
21 Jul 2008, 11:41 PM
I have another problem now...

I'm using this extension in an web application that is mostly in French and I have a lot to do with special characters like '

phedoreanu
22 Jul 2008, 1:40 AM
I changed the 'textCls' config option, in the 'createEditor' function from the Ext.ux.netbox.date.DateRangeOperator, from Ext.form.TextField to Ext.form.DateField.

But it dosen't work as it should :(

Does the RangeMenu automatically losses focus and closes when the DatePicker icon is clicked ?


I've also attached this:

8249

I also get another exception, but only on Ext 2.0.1, when I click the DatePicker icon.


input.match is not a function
chrome://firebug/content/blank.gifExt.XTemplate=function() {Ext.XTemplate.superclass.constructor.apply(this,argumen...
Help ? :D

vmihaylov
22 Jul 2008, 6:14 AM
Hi guys,
First I want to thank for the wonderfull work which you have done so far with cherry :).
I am using it in my application and it works like a charm.
However, as you might imagine :) I would like to tweak it a little bit ...
I am willing to change two things, and looked at the code but unfortunately I couldn't pick up enough to make me comfortable hacking it.
1. The first of those is to have regular date picker editors for the date range operator. How can I achieve that?
2. The second one is related to the combos in my grid. I need to be able to enter free text as search criteria for those combo boxes, not an enum. With only the static filter this is working. However, when I use quickfilter (I use that one too :) ), the id of the field is displayed in the filter pane instead of the text. How can I tweak the quick filter so that when I do quickfilter on a combo field, instead cell value another grid record attribute would be used (I have an record attribute preloadedDisplayValue, which is displayed for comboboxes, I want to set that in the filter).
The second tweak got quite large ..., but hopefully it is not complex.

any ideas and suggestions are appreciated, thanks in advance :)

and one more thing ...
Currently my filter value comboboxes are not displayed properly, their trigger button is not displayed. Any ideas how can I fix that?


ah, and one last question: What's the state of cherry in svn. Is it better than the 0.2.0 release? Is it stable?

dandfra
22 Jul 2008, 6:46 AM
I've uploaded a full working example :)

Test case:

1. Select 'Last Updated' filter
2. Operator '='
3. Select a date using the DatePicker button
4. Focus on the grid then focus again on the DateField.
The date will automatically change :-/


8246


Here's the workaround: http://extjs.com/forum/showthread.php?p=156047#post156047

dandfra
22 Jul 2008, 7:10 AM
[QUOTE=phedoreanu;198267]I have another problem now...

I'm using this extension in an web application that is mostly in French and I have a lot to do with special characters like '

dandfra
22 Jul 2008, 7:51 AM
For 2 look at the getterFn config option of the Ext.ux.netbox.core.QuickFilterModelView. I think it's what you need...
For 1) I never tried this one (and this answers to phedoreanu too). If you are able to do what you say, I will be more than happy to put it into cherry :)

vmihaylov
22 Jul 2008, 11:42 PM
Thanks dandfra, (http://extjs.com/forum/member.php?u=5466)
Will try to add datepicker editor, and if I succeed will post the code here.

durlabh
23 Jul 2008, 6:57 AM
Hi,

I was wondering whether somebody has worked on implementing the GridFilter like implementation too for CherryOnExt. I think that CherryOnExt has an advantage in terms of filters it offers but from the user perspective, GridFilter implementation looks a bit more slicker in header. As a quick solution, I have both CherryOnExt and GridFilters plugin on my grid and I am planning to remove GridFilters and implement CherryOnExt in headers as we work further. In the meantime, to get both plugins to work with preferences, I have done the following tweaks to preferences:



var removeFilter = function() {
filterModel.setFilterObj(null);
if(gridConfig.gridFilter) {
gridConfig.gridFilter.clearFilters();
}
filterTable();
};

function filterTable(){
var store = grid.getStore();
var filterInfo = filterModel.getFilterObj();

if(filterInfo == null) {
filterInfo = null;
} else {
filterInfo = resolveFilter.call(module, filterInfo);
filterInfo = Ext.util.JSON.encode(filterInfo);
}

Ext.applyIf(store, {baseParams: {}});
store.baseParams.filter = filterInfo;

var limit;
if(store.lastOptions) {
limit = store.lastOptions.params.limit;
}

if(!limit) {
limit = grid.initialConfig.pageSize;
}
store.load({params: {start: 0, limit: limit}});
}

function provaGetFunc(){
var pref = {grid:grid.getState(),filter: filterModel.getFilterObj()};
if(gridConfig.gridFilter) {
pref.headerFilters = gridConfig.gridFilter.saveState(grid, {});
}
return pref;
}

function provaSetFunc(pref){
if(pref.filter){
filterModel.setFilterObj(pref.filter);
}
if(pref.grid){
grid.getView().userResized=true;
grid.applyState(pref.grid);
//grid.getColumnModel().setConfig(grid.getColumnModel().config);
if(gridConfig.gridFilter) {
if(pref.headerFilters) {
gridConfig.gridFilter.applyState(grid, {filters: pref.headerFilters});
}
}
}
filterTable();
}




This is straight out from my app so copy/ paste may not work. However, I wanted to mention another issue I had faced:

In the sample provaSetFunc had gridColumnModel.setConfig. This was giving me issues with editorGrids. So, I commented that out.

I hope this is useful for others trying to achieve same thing.

ScAndal
12 Aug 2008, 7:51 PM
Wow this is an amazing plugin. I'm trying to get it working with Json in ASP.NET MVC.

I've got paging/sorting working. The only thing left is to handle filters.

Does anyone have any ideas on how to parse the filter Json into C# objects?

Here is an example of my filterobject
{"fieldId":"71","operatorId":"STRING_EQUAL","values":[{"label":"Vickie","value":"Vickie"}]}

Thanks,

ScAndal

dandfra
18 Aug 2008, 1:54 AM
Sorry for the late reply, I was on holiday last week :)
Look at this one: http://extjs.com/forum/showthread.php?p=182233#post182233

ScAndal
18 Aug 2008, 4:26 AM
Sorry for the late reply, I was on holiday last week :)
Look at this one: http://extjs.com/forum/showthread.php?p=182233#post182233

Wow I'm not sure how I missed that post. Code works great. I'm now paging and filtering :) WOOHOO. Great plugin!

symbios
22 Aug 2008, 3:30 AM
Is it possible to activate typeAhead for the filter selection combobox? I have more than 100 entries in it which is makes it less convenient to select a specific one.

dandfra
22 Aug 2008, 4:08 AM
I use it...
With 0.2.0 release you have to type at least 2 characters I think (maybe a 0.2.1 is needed, since in SVN there are a lot of unreleased fixes...)
With local stores I never tried...
If you nedd more help please post some sample...

symbios
23 Aug 2008, 4:20 AM
The problem is that I cannot type at all into the combo (editable seems to be false). I am using a local store and cherryOnExt 0.2. And I am not sure how to enable typeAhead. I have this:



...
// filterCfg is defined locally before
var filterModel = new Ext.ux.netbox.core.FilterModel(filterCfg);

var myFilterWin = new Ext.Window({
title: 'Filters',
width:500,
height:300,
layout: 'fit',
closeAction: 'hide',
closable: false,
items: [{
filterModel: filterModel,
xtype: 'dynamicFilter',
buttons: [button2]
}]
});
..


How can I set editable:true and typeAhead:true for the filter combo? Does it only work remote stores? If so, is there any example how to use remote data in filterCfg?

Thank you!

dandfra
26 Aug 2008, 12:02 AM
Sorry for the late reply, Ext js forums were offline yesterday.

To use remote store:
When you define a column with available values in filterCfg, you use this one:
{id: yourId, label: 'yourLabel', availableValues: yourStore, remoteStore: true},
With = or != type ahead should be available by default. With list and not in list it's not availabble bacause andrie.Select doesn't support typeAhead with multiple selection... I recommend to use the SVN version, because i fixed some bug related to typeAhead in SVN


Ciao

symbios
26 Aug 2008, 3:03 AM
Thanks for answering.. not sure if we're talking about the same, I meant this combo (I cannot type in):

http://www.swp-symbios.ch/filter.png

By the way, I seem to have encountered a bug: when using a filter for a "date" field and operator is "DATE_EQUAL", then value is empty in Internet Explorer 7 (works fine in FF).

bobbicat71
27 Aug 2008, 12:19 AM
dandfra and symbios, you are talking about two different combos, filter selection combobox and filter's value ...

Currently there is not a configuration that can make editable the filter selection combobox.

A chance to do this is to extend the class "DynamicFilterModelView" and rewrite the function "createFieldCombo" with your configuration for the combo. I have not tried, so I will not assure a good result.

Regarding the bug, I was not able to reproduce it with IE7. You could give me more information?

symbios
29 Aug 2008, 3:00 AM
Thank you bobbicat71 for your suggestion with extending the selection combo, I'll try just that. As far as the possible bug is concerned - if you could not reproduce it, I'll obviously have to do some more investigations. I'll report further details when ready.

gotcha
3 Sep 2008, 12:44 PM
Hi
First - thanks for this good plugin.

I have tried to use it - but find some problems(maybe bugs). When I use a date field int he filter, the frame displays the calendar image. Once a user clicks the image, a calendar is supposed to show up, which does, but it spans beyond the screen! The calendar doesn't layout properly on the screen - this happens in FF3.0.1. This is clearly seen in your example as well - http://cherryonext.googlecode.com/svn/demos/demo/allTogether.htm

Any idea how to fix this?

Thanks.

dandfra
3 Sep 2008, 11:10 PM
This is not a cherry bug, but an ext js 2.0 bug (or missing feature). If you have to support FF 3.0.1 use ext js 2.2. I use it and it works with cherry.
Ciao

gotcha
4 Sep 2008, 12:51 PM
Thanks!

Ok... I have another question -

A screen has two grids - source and details.

When user clicks a row in the source grid, two things happen -
1. The names and data types of each column in the grid changes.
2. The contents of that selected row are then displayed.

Now, I am trying to apply this filter on the details screen. To do this properly, two things need to be done -
1. Apply filter window with filter config (list of column names) changing dynamically.
--> This I can do by
a) define and create the details grid first.
b) moving all the filter code into the 'show details' function
c) by not applying the plugin [new Ext.ux.netbox.core.FilterHeaderPlugin(filterModel)]

2. Apply 'quickfilter' functionality as well. To do this, one must define the quickfilter to the filter model (hence, this has to be in 1b - in the 'show details' function.
But for the grid to know about the context menu manager, the plugin has to be defined on the grid itself (1a).

So, how to do this?

Options I can think of but don't know if they are possible -

1) contextmenumanager has a way of dynamically setting of adding menus.
2. Grid editor has a way to redefine plugins on the fly!

dandfra
4 Sep 2008, 11:48 PM
If I understand you want to change "on the fly" all the filter columns. The best way to do this is to use cherry from SVN and to reconfigure the FieldManager:



filterModel.setFilterObj(null);//remove the filter before changing the fields...
filterModel.getFieldManager().reconfigure(newConfig);


In this way I think that quickfilter, FilterHeaderPlugin & co should work, since you don't change the filterModel, just reconfigure the fields

Ciao

gotcha
5 Sep 2008, 10:55 AM
Thanks! I think, logically, that should fix it.

But, where do I find the latest code in SVN ? I browsed through SVN but was unable to find code for cherryonext. Could you please give the path to it? Thanks again!

tidalbobo
5 Sep 2008, 6:52 PM
Excellent Filter component.
I like to suggest the following, which might be very useful for many ( err.. including me too..)

Is it possible to have an AND/OR combination switch.
Currently if is say
* Company [contains] Intel
* Company [contains] Microsoft

The result will be those that have BOTH Intel AND Microsoft. The default combining seems to be AND.

To be able to get Companies Intel OR Microsoft, we need an OR based combining.
A switch for AND/OR is what i wish for...

dandfra
7 Sep 2008, 11:12 PM
http://code.google.com/p/cherryonext/

dandfra
8 Sep 2008, 1:00 AM
Yes, I understand what you mean, we will use it happily too... We'll do it when we have a bit of time (maybe this week, but please don't hold your breath :s )

gotcha
8 Sep 2008, 4:30 AM
http://code.google.com/p/cherryonext/

Hi.. I had actually tried with the code downloaded from the above link and I tried again now, but get the same error -

filterModel.getFieldManager().reconfigure is not a function
(?)()()demo.htm (line 110)
EventManager()()ext-all.js (line 12)
camelFn()()ext-all.js (line 13)
[Break on this error] filterModel.getFieldManager().reconfigure(filterCfg);

I had modified the demo you had on the link and is shown below.

Please advise.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0064)http://cherryonext.googlecode.com/svn/demos/demo/allTogether.htm -->
<HTML><HEAD><TITLE>All Togheter Demo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<LINK href="demo/ext-all.css" type=text/css rel=stylesheet>
<LINK href="demo/cherryonext.css" type=text/css rel=stylesheet>
<SCRIPT src="ext-2.0.1/ext-base.js" type=text/javascript></SCRIPT>
<SCRIPT src="ext-2.0.1/ext-all.js" type=text/javascript></SCRIPT>
<SCRIPT src="CherryOnExt-0.2.0/cherryonext.js" type=text/javascript></SCRIPT>
<SCRIPT src="demo/mydata.js" type=text/javascript></SCRIPT>
<!--Ajax call simulation-->
<SCRIPT language=JavaScript src="demo/jsUnitAjax.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="demo/simulateAjaxCall.js" type=text/javascript></SCRIPT>
<!--End ajax call simulation-->
<SCRIPT language=JavaScript type=text/javascript>

Ext.BLANK_IMAGE_URL="ext-2.0.1/resources/images/default/s.gif";

var fieldManager;
var filterModel;
var localFilterResolver;
var grid;
var filterDialog;
var filterBackup;

//show the shares only if I have some shares in my portfolio
function shouldShowShares(grid,row,column){
//if I click outside the grid, I don't want to show nothing
if(row<0){
return;
}
var record=grid.getStore().getAt(row);
if(record.get('inPortfolio')==0)
return true;
else
return false;
}

function showShares(grid,row,column){
var record=grid.getStore().getAt(row);
var company = record.get('company');
var msg ='You have <b>'+company+"</b>'s shares in your portfolio.<br>";
msg = msg+'If this were a serious demo here there would be the number of your shares';
Ext.Msg.alert("Sorry, we don't know your shares' amount... for now ", msg);
}

function showDetails(grid,row,column){
var record=grid.getStore().getAt(row);
var company = record.get('company');
Ext.Msg.alert(company+' is very cool', "Marketing material here...");
}

var availableValuesStore=new Ext.data.SimpleStore({fields: ['label', 'value'],
data: [
["Yes","0"],
["No","1"],
["I don't remember","2"]
]});

Ext.onReady(function(){

var filterCfg=[
{id: 'company',label: 'Company',defaultValues:[{value:"default value"}]},
{id: 'price',label: 'Price', type: 'float'},
{id: 'change',label: 'Change', type: 'float'},
{id: 'pctChange',label: '% Change', type: 'float'},
{id: 'lastChange',label: 'Last Updated', type: 'date', format: 'd/m/Y H:i'},
{id: 'inPortfolio',label: 'In Portfolio', type: 'enum', availableValues: availableValuesStore, remoteStore: false}
];

//FilterModel
fieldManager=new Ext.ux.netbox.core.FieldManager(filterCfg);
filterModel=new Ext.ux.netbox.core.FilterModel(fieldManager);
localFilterResolver=new Ext.ux.netbox.core.LocalStoreFilterResolver(filterModel);

//--------------------------------------------------------------------------------------
// QuickFilter
var quickFilter= new Ext.ux.netbox.core.QuickFilterModelView({
filterModel: filterModel
});

quickFilter.on("filterChanged",filterTable);

var contextMenuManager= new Ext.ux.netbox.ContextMenuManager({
menu:{
items:[{
text: 'Show my shares',
// isToShow, method that decides whether or not to show the menu
isToShow: shouldShowShares,
// handler, method that decides what to do when you press the menu item
handler: showShares},
{
text: 'Details',
handler: showDetails
},quickFilter.getFilterMenu(),quickFilter.getRemoveFilterMenu()]
}
});


//--------------------------------------------------------------------------------------
//--- Going to try out reconfigure method...
//--------------------------------------------------------------------------------------
filterCfg=[
{id: 'company',label: 'Company',defaultValues:[{value:"default value"}]},
{id: 'price',label: 'Price', type: 'float'},
{id: 'inPortfolio',label: 'In Portfolio', type: 'enum', availableValues: availableValuesStore, remoteStore: false}
];

filterModel.setFilterObj(null);//remove the filter before changing the fields...
filterModel.getFieldManager().reconfigure(filterCfg);

//--------------------------------------------------------------------------------------

// create the Grid
grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 95, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y H:i'), dataIndex: 'lastChange'},
{header: "In Portfolio", width: 85, sortable: true, renderer: inPortfolio, dataIndex: 'inPortfolio'}
],
stripeRows: true,
plugins: [new Ext.ux.netbox.core.FilterHeaderPlugin(filterModel),contextMenuManager],
autoExpandColumn: 'company',
region: "center",
tbar: [{
text: 'Filters...',
handler: function(){
filterDialog.show();
}
}]
});

var viewport = new Ext.Viewport(
{layout: "border",
items: [
grid
]
}
);

var button2=new Ext.Button({text: "Apply"});
button2.on("click",filterTable);

filterDialog = new Ext.Window({
title: 'Filters',
width:600,
height:350,
layout: 'border',
closeAction: 'hide',
items: [{ filterModel: filterModel,
region: 'center',
xtype: 'dynamicFilter',
buttons: [button2]
}]
});
filterDialog.on('beforeshow', onShowFilterDialog);
filterDialog.on('beforehide', onCloseFilterDialog);

//--------------------------------------------------------------------------------------
// Preference Manager
prefManager=new Ext.ux.netbox.PreferenceManager({
id: 'prefManagerId',
userName: 'user',
getFn: provaGetFunc,
setFn: provaSetFunc,
fnScope: this,
getAllPrefURL:'http://getAllPrefURL',
applyDefaultPrefURL:'http://applyDefaultPrefURL',
loadPrefURL:'http://loadPrefURL',
savePrefURL:'http://savePrefURL',
deletePrefURL:'http://deletePrefURL'
});

prefManagView = new Ext.ux.netbox.PreferenceManagerView({preferenceManager: prefManager});
grid.getTopToolbar().add({text: 'Preference', menu: prefManagView});

prefManager.applyDefaultPreference();
//--------------------------------------------------------------------------------------
});

function onShowFilterDialog(){
filterBackup = filterModel.getFilterObj();
}

function onCloseFilterDialog(){
if(Ext.util.JSON.encode(filterBackup)!=Ext.util.JSON.encode(filterModel.getFilterObj())){
Ext.MessageBox.confirm('Confirm', 'The filter was not applied. Do you want to do it now?', whatDoYouWantToDo);
}
}

function whatDoYouWantToDo(btn){
if(btn=='yes')
filterTable();
if(btn=='no')
filterModel.setFilterObj(filterBackup);
}

function filterTable(){
localFilterResolver.apply(store);
}

function provaGetFunc(){
return({grid:grid.getState(),filter: filterModel.getFilterObj()});
}

function provaSetFunc(pref){
if(pref.filter){
filterModel.setFilterObj(pref.filter);
}
if(pref.grid){
grid.getView().userResized=true;
grid.applyState(pref.grid);
grid.getColumnModel().setConfig(grid.getColumnModel().config);
}
filterTable();
}

</SCRIPT>

<META content="MSHTML 6.00.2900.3132" name=GENERATOR></HEAD>
<BODY id=mettiloQui></BODY></HTML>

dandfra
8 Sep 2008, 4:38 AM
1) You should checkout the code using:
svn checkout http://cherryonext.googlecode.com/svn/trunk/ cherryonext-read-only
2) you should build the total file following the instructions:
http://code.google.com/p/cherryonext/wiki/BuildHowTo

(PS: Now that I think, it should probably work (I don't remember any non backward compatible change in the file) if you just download FieldManager and include it after cherryonext.js
http://code.google.com/p/cherryonext/source/browse/trunk/src/netbox/core/FieldManager.js)

litumishra
9 Sep 2008, 4:46 AM
I am using static filter model view to show filters on top of my grid. But i want to create the filters dynamically with data in them fetched from sql database. I am using Asp.mvc , sql server and ExtJs for the project.

I am creating a reporting tool where in each report can have different filters displayed on top of the grid. For example i want to display filters like Country (Combo Drop down) and name filter (textbox) in one report

and in another i want to give support for date range. Please suggest me how i can proceed with this. I am new to Extjs. So any reference or sample code will be helpful.

I want my combo filters to be populated with data's from DB, like country drop down filter should have all counties listed in my DB.

Thanks in advance

bobbicat71
9 Sep 2008, 6:38 AM
I am using static filter model view to show filters on top of my grid. But i want to create the filters dynamically with data in them fetched from sql database. I am using Asp.mvc , sql server and ExtJs for the project.

I am creating a reporting tool where in each report can have different filters displayed on top of the grid. For example i want to display filters like Country (Combo Drop down) and name filter (textbox) in one report

and in another i want to give support for date range. Please suggest me how i can proceed with this. I am new to Extjs. So any reference or sample code will be helpful.

I want my combo filters to be populated with data's from DB, like country drop down filter should have all counties listed in my DB.

Thanks in advance

I'm not sure if I have understood what you want to know.
Each grid must have a static filter that is connected to the ColumnModel.
You can see an example in the file staticFilter.htm under the demo directory.
If you want to populate combo-box in your static filters with data from DB,
you must provide data from remote using a data-store (Ext.data.Store) and a data-reader (Ext.data.DataReader).
If you're using ASP might be better to use xml reader (Ext.data.XmlReader).
An important thing for the xml is that must return both the label that the value
(SQL example: "SELECT DISTINCT country AS value, country AS label FROM countries_table").

I hope I have been clear, otherwise tell me about.


// suggestions for the back-end on YOUR_LOAD_STORE.aspx
SqlDataAdapter mySqlDataAdapter = new SqlDataAdapter("YOUR_SQL_STRING", "YOUR_STRING_FOR_THE_CONNECTION");
DataSet myDataSet = new DataSet();
mySqlDataAdapter.Fill(myDataSet, "Record");
Response.ContentType = "text/xml";
Response.Write(myDataSet.GetXml());



// how to configure static filter ...
var YOUR_dataStore = new Ext.data.Store({
url: 'YOUR_LOAD_STORE.aspx',
reader: new Ext.data.XmlReader({record: 'Record'},[{name: 'value'}, {name: 'label'}])
});

var filterCfg=[
{id: 'company',label: 'Company'},
{id: 'price',label: 'Price', type: 'float'},
{id: 'change',label: 'Change', type: 'float'},
{id: 'pctChange',label: '% Change', type: 'float'},
{id: 'lastChange',label: 'Last Updated', type: 'date', format: 'd/m/Y H:i'},
{id: 'country',label: 'Country', type: 'enum', availableValues: YOUR_dataStore, remoteStore: true}
];

litumishra
9 Sep 2008, 7:41 AM
Thanks .. I will take a look into this tomorrow and get back to you.

litumishra
10 Sep 2008, 10:25 PM
Thanks for the reply. Let me put my requirement clear enough.

I have a stored procedure which return multiple resultsets. The SP takes some parameters and returns some resultsets as output. I want to have the parameters to be passed to SP in the form of filters from the front end where in the user can input the values for each parameter of SP trhough a filter.

These filters should be passed to the backend and each resultset should be displayed in a grid in separate TABS.

I am trying to use static filters. Please guide me how to do it. I am using .net and sql server.
I have a TabPanel with multiple Tabs and grid in them.

Any sample code will be helpful.

dandfra
10 Sep 2008, 10:52 PM
What is the source of your problem exactly? From what I understand you have to do in in 3 step:
1) build the GUI. This one should be quite easy, simply use a tab panel with a border layout in each tab, put the static filter in the north region and the gridin the center region and you are done
2) Obtain the filter from each tab. This one should be easy, if you have the filterModels, just call getFilterObj
3) reload multiple stores with only one Ajax call.

What is(are) the problematic step(s)?

litumishra
10 Sep 2008, 10:59 PM
Thanks dandfra for the reply.
I want to have the static filter on top of Tab Panel. The filter should be applied to all Tabs and all grids should load after applying same set of filters passed from top. I don't want each grid to have their own set of filters.

Can anybody please help me with this?

Thanks

dandfra
10 Sep 2008, 11:06 PM
Ah, ok. I don't understand how you want to manage the different fields of the grids.
If a grid on the first tab has fileds A and B, and the grid on the second tab has fields B and D, what fields should the static filter show?
PS: If you want to change on the fly the fields you should use the reconfigure method of the fieldManager (search the thread for more details). NB: there is a bug on the static filter view when you remove a field: the hole left for the removed field is not filled....

mask_hot
11 Sep 2008, 1:53 AM
Hello,

should it be possible to filter for "null" or "not null" values for columns typed as date?

gotcha
11 Sep 2008, 6:39 AM
Hi,
In the filter window, the dropdown box displays contents from the fitlermodel, but its contents are sorted alphabetically! Is there a way for it to display the list the way it has been defined in the filter config?

bobbicat71
12 Sep 2008, 1:09 AM
Hello,

should it be possible to filter for "null" or "not null" values for columns typed as date?

Filter for "null" is possible but it depends by your back end. For example in our implementation, if I filter for an empty string means that I search on db with the value null.


private string date_equal(string fieldId, object[] values)
{
string valueStr = this.calculateValue(values);
if (valueStr == "")
{
return fieldId + " is null";
}
return fieldId + " = " + this.convertDate(valueStr);
}


If you need to filter for "not null" you need to include the missing operator (!=) among those in the field that interests you.
You have two ways to do it:

1. rewrite the class "DateField.js" by adding the following line:

this.addOperator(new Ext.ux.netbox.date.DateOperator("DATE_NOT_EQUAL","!=",format));
2. add the missing operator by writing the code:


var YOUR_filterModel = new Ext.ux.netbox.core.FilterModel(YOUR_filterCfg);
var YOUR_field = YOUR_filterModel.getFieldManager().getFieldById('YOUR_FIELD_ID');
var YOUR_operator = new Ext.ux.netbox.date.DateOperator("DATE_NOT_EQUAL","!=",'d/m/Y H:i');
YOUR_field.addOperator(YOUR_operator);

In both cases you must implement the back end so that can translate the operator in the correct syntax sql.

bobbicat71
12 Sep 2008, 1:35 AM
Hi,
In the filter window, the dropdown box displays contents from the fitlermodel, but its contents are sorted alphabetically! Is there a way for it to display the list the way it has been defined in the filter config?

There is no way to do it by configuring. But a way to do it there anyway.
Rewrite the class "DynamicFilterModelView" and delete the following line:

this.fieldStore.sort('label','ASC');

If it can be useful to many we may introduce a parameter to be passed to filtermodel and disable sorting.

gotcha
12 Sep 2008, 10:32 AM
Thanks!

I tried changing the file and test it, but it didn't work.

But I don't even include that DynamicFilterModelView.js.js file in my code. All I am using is -

<SCRIPT type="text/javascript" src="CherryOnExt-0.2.0/cherryonext.js"></SCRIPT>
<SCRIPT type="text/javascript" src="CherryOnExt-0.2.0/src/netbox/core/FieldManager.js"></SCRIPT>


Please advise!

bobbicat71
14 Sep 2008, 11:13 PM
Thanks!

I tried changing the file and test it, but it didn't work.

But I don't even include that DynamicFilterModelView.js.js file in my code. All I am using is -

<SCRIPT type="text/javascript" src="CherryOnExt-0.2.0/cherryonext.js"></SCRIPT>
<SCRIPT type="text/javascript" src="CherryOnExt-0.2.0/src/netbox/core/FieldManager.js"></SCRIPT>


Please advise!


If you modify the file "DynamicFilterModelView.js" you need to include this and not the "FieldManager.js".
Hope this helps.

tidalbobo
19 Sep 2008, 9:25 AM
Any thing on this?


Excellent Filter component.
I like to suggest the following, which might be very useful for many ( err.. including me too..)

Is it possible to have an AND/OR combination switch.
Currently if is say
* Company [contains] Intel
* Company [contains] Microsoft

The result will be those that have BOTH Intel AND Microsoft. The default combining seems to be AND.

To be able to get Companies Intel OR Microsoft, we need an OR based combining.
A switch for AND/OR is what i wish for...

bobbicat71
21 Sep 2008, 10:47 PM
The latest version that you can download from svn repository contains this new feature.

Regards.

gotcha
29 Sep 2008, 5:59 AM
Hi..
When I get the filter menu up and add a column for filter but do NOT enter any filter value, the filter model object is not created right and the provided back-end PHP fails with bad SQL error.

If a value is entered for column NAME (= 'SAM'), the the JSON string is as shown below -

{"fieldId":"NAME","operatorId":"STRING_EQUAL","values":[{"label":"SAM","value":"SAM"}]}

If no value is entered for column NAME (= ''), the the JSON string is malformed as shown below -

{"fieldId":"NAME","operatorId":"STRING_EQUAL","values":[]}

Shouldn't the above string be

{"fieldId":"NAME","operatorId":"STRING_EQUAL","values":[{"label":"","value":""}]}

???

This is causing bugs in our system...

Please advise how to get the correct filtermodel.

Thanks.

dandfra
29 Sep 2008, 6:10 AM
It's so by design...

An empty array means that the user entered no value. This is usefull for example with NUMBER_EQUALS, because we use it map a is null condition.
In this case, you should manage {"fieldId":"NAME","operatorId":"STRING_EQUAL","values":[]}
in the same way as {"fieldId":"NAME","operatorId":"STRING_EQUAL","values":[{"label":"","value":""}]}.
You have the first when the user doesn't enter a value, the second when enter a value and then it zeroes it...

In our sample PHP backend we convert the values this way:


function calculateValue($value){
if(count($value)===0){
return("");
} else {
return(str_replace("'","''",$value[0]->value));
}
}

The bold code is there exactlly to manage this case.
Ciao

PS: The same happens with all the operators, and so the case must be managed with dates and numbers too...

dandfra
3 Oct 2008, 5:16 AM
Here the change log:

A LOT of bug fixes
Added possibility to reconfigure the fieldManager to completely change the set of the fields (thanks to donssmith)
Better design of StaticFilterModelView?: it now handles resizes a lot better
Possibility to use quick filter in replace mode: if a filter on a given field is already existing, the quick filter view will replace this one and not one a new
Possibility to specify "Match all" or "Match one" filter in Dynamic Filter Model View
management of case insensitive search in fields with available values


Grab it at Google Code download page (http://code.google.com/p/cherryonext/downloads/list)

gthe
11 Oct 2008, 1:31 AM
First of all - thanks for that very nice plugin.
I try use it static filters with remote store and got error.
My code:

this.nettp_status_store=new Ext.data.SimpleStore({fields: ['label', 'value'],
data: [
["Disable","0"],
["Enable","1"]
]}),
this.nettp_hostname_store = new Ext.data.Store({autoLoad:false,proxy: new Ext.data.HttpProxy({url: 'nettp_db.php', method: 'POST'}),reader: new Ext.data.JsonReader({root: 'names'},[{name: 'id'}]),baseParams : {task: "get_host_templ_name"}})
this.DevicesfilterCfg=[
{id: 'nettp_status',label: 'nettp status', type: 'enum', availableValues: this.nettp_status_store, remoteStore: false},
{id: 'description',label: 'description'},
{id: 'nettp_count_if',label: 'IF\'s count',type: 'int'},
{id: 'host_template_id',label: 'host template name', type: 'enum', availableValues: this.nettp_hostname_store, remoteStore: true},
{id: 'hostname',label: 'hostname'},
{id: 'status',label: 'status'}
],
this.DevicesfieldManager=new Ext.ux.netbox.core.FieldManager(this.DevicesfilterCfg),
this.DevicesfilterModel=new Ext.ux.netbox.core.FilterModel(this.DevicesfieldManager),
this.DevicesFilterResolver=new Ext.ux.netbox.core.LocalStoreFilterResolver(this.DevicesfilterModel)Error occur with store nettp_hostname_store.
In Firebug I see Response from server:

({"names":[{"id":"1"},{"id":"3"},{"id":"4"},{"id":"5"},{"id":"6"}]})And error in cherryonext-debug.js (line 688)

v is undefinedsetValue()(undefined)cherryon...-debug.js (line 688)addValue()(undefined)cherryon...-debug.js (line 626)onSelect()(Object id=1058 data=Object json=Object store=Object, 2)cherryon...-debug.js (line 525)onViewClick()(Object initialConfig=Object tpl=Object singleSelect=true, 2, div.x-combo-list-item, Object browserEvent=Event mouseout button=0 type=mouseout)cherryon...-debug.js (line 608)EventManager()()2_1_ext-all.js (line 12)EventManager()()2_1_ext-all.js (line 12)ColorPalette()(Object browserEvent=Event mouseout button=0 type=mouseout)2_1_ext-all.js (line 83)camelFn()()2_1_ext-all.js (line 13)getViewWidth()()2_1_ext-base.js (line 10)chrome://firebug/content/blank.gif v = v.split(String(this.separator));Look in screen:

dandfra
13 Oct 2008, 12:28 AM
I think this is a problem with the store... Cherry expects a store with a field value and a field label. The given store has only a field 'id'. I think that you should use mapping in defining the JSonReader (look at the doc for JSonReader for more details)
Ciao

gthe
13 Oct 2008, 3:57 AM
Ok, I change fields names in sql and it work now!

this.nettp_hostname_store = new Ext.data.Store({autoLoad:false,proxy: new Ext.data.HttpProxy({url: 'nettp_db.php', method: 'POST'}),reader: new Ext.data.JsonReader({root: 'names'},[{name: 'label'},{name: 'value'}]),baseParams : {task: "get_host_templ_name"}})and json:

({"names":[{"value":"1","label":"Generic SNMP-enabled Host"},{"value":"3","label":"DES-3828"},{"value":"4","label":"Karlnet Wireless Bridge"}]})Thanks!


Another problem - dropdown box lost values after focus lost.


p.s. in PHPFilterResolver.php:30
return($field."is null");may be correct:

return($field." is null");

Sorry for my English.

dandfra
13 Oct 2008, 11:11 PM
It's a bit difficult to solve your problem without more indication... Try the latest SVN version of Select.js (http://code.google.com/p/cherryonext/source/browse/trunk/src/external/Select.js)and let me know if it works... Maybe I fixed something like this 2 or 3 days ago...

gthe
15 Oct 2008, 10:06 PM
=D> Many thanks. Now all works.

nnextjs
29 Oct 2008, 4:19 PM
Hi,

I am trying to use the static filter but I found that using 2 comboboxes (like in the demo: In Portfolio and Last Updated. After clicking on Apply button, Last Updated is reset to blank. How can I prevent such reset?

Thank you.

dandfra
30 Oct 2008, 12:19 AM
...that shipped in the release.. It's fixed in SVN. Please grab Select.js from SVN (http://code.google.com/p/cherryonext/source/browse/trunk/src/external/Select.js).
Probably it's better to release a bug fix version...

dandfra
30 Oct 2008, 12:58 AM
It's a bug fix release, that fix the nasty bug signaled above and adds french translation (thanks to guillaume DOT crico AT gmail.com).
Ciao

dandfra
30 Oct 2008, 1:11 AM
p.s. in PHPFilterResolver.php:30
return($field."is null");may be correct:

return($field." is null");


Fixed thanks :D

Jena
10 Nov 2008, 1:29 AM
I am using cherry on ext dynamic filter, i am fetching data dynamically into the filter from the sql database. I am using Asp.mvc , sql server and ExtJs for the project.

I am fetching the data in the drop down (i am using below code) but it is bringing repeated data also as same action i am using to show the grid and i dont want to write one more action to fetch the data to save writting one more action result i have to remove the repeated data from the drop down.

Please let me know if there is a way to remove the releated data from the drop down of the dynamic filter.



var filterCfg = [{
id: 'name',
label: 'Name',
type: 'enum',
editable: false,
allowBlank: false,
forceSelection: true,
readOnly: true,
availableValues: new Ext.data.JsonStore({
id: 'id_task',
root: 'data',
url: this.url,
fields: [{
name: 'label',
type: 'string',
mapping: 'name'
}, {
name: 'value',
type: 'string',
mapping: 'name'
}],
sortInfo: {
field: 'label',
direction: 'ASC'
},
remoteSort: false
})
}

litumishra
13 Nov 2008, 8:59 PM
The updated version of cherryon Ext supports case sensitive / insensitive search.

Can anyone please give code snippet of how to enable case insensitive search for filters?

dandfra
17 Nov 2008, 5:02 AM
No, I don't think this is possible. Cherry uses a combo (more or less) with the Store you give in the cfg. I don't think that Ext allows to easylly show only the distrinct entries (and a DB is surelly faster than javascript code to create distinct entries). If you have a good idea to solve this trouble, let me know...

dandfra
17 Nov 2008, 5:20 AM
In Ext the filters are not solved directlly from the javascript library, you need a backend to solve them. Now if you implement a backend that is case-insensitive (which is easy, for example in Oracle/PHP STRING_EQUAL becomes:

function string_equals($field,$value){
$val=calculateValue($value);
if($val===""){//in Oracle empty string and null value are the same thing
return($field." is null");
} else {
return("to_upper(".$field.")='".strtoupper($val)."'");
}
}
).
Now, I discovered that even if you use a case insensitive backend, there were troubles with the available values store (I don't remember exactlly what the steps to reproduce the problem was, only remember that you'll select something, and this one was not selected right because the comparison to decide the selected item was case sensitive). So a config options was added to the field cfg, caseSensitive.
so If you have a backend whici is case insensitive, and available values, you should use caseSensitive: false. Example:


var filterCfg=[
...
{id: 'ciccio', type: 'string', caseSensitive: false, availableValues: yourAvailableValuesStore}
...
]


Hope that this help

mask_hot
10 Dec 2008, 8:13 AM
Hello Dan,

is it possible to save filters or to use predefined filters?

thx

donssmith
10 Dec 2008, 10:46 PM
@mask_hot

Yes you can save and have predefined filters. In the first post they provided a link to an example that demonstrates all of the functionality you get with CherryOnExt. Here's the link:

http://cherryonext.googlecode.com/svn/demos/demo/allTogether.htm

mjhaston
22 Jan 2009, 4:40 PM
Does the filter have to be passed as JSON? I can build JSON on my server side, but I can't parse it out. I'm used to getting filters in traditional POST strings.

Awesome work!

bhavna
22 Jan 2009, 10:23 PM
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)



i done the same you explain above but it doesnot filter out whole records from store.
its only applied to current page records. please help me to filter whole store and is any changes made to php file where query is to be fire.
please help....
tThanks in advance.

gthe
22 Jan 2009, 10:42 PM
To devs:
First - Thanks for this great plugin!=D>

Second - I have one but big feature request from my users. We use this plugin with filterCfg:


var filterCfg=[
{id: 'eventname',label: 'snmptt - eventname', type: 'enum', availableValues: snmptt_eventname_store, remoteStore: true},
{id: 'hostname',label: 'snmptt - hostname'}]Soo, for now users can create filter for eventname like ("=","!=","in","not in").
But it would be very nice if we could also create a filter like for textfield too. I.e. "Start with" or "contains" and etc.
Does this will be possible ?

Thanks and sorry for my English.

bhavna
23 Jan 2009, 1:00 AM
Hi,
I used PHPFilterResolver.php file for filteration but i never get $_Request['filter'] value.
it is null. so it cant filter remote data.

store.baseParams=Ext.apply(store.baseParams,{filter: Ext.util.JSON.encode(filterModel.getFilterObj())});

store.load({params:{start: 0, limit: 15}});


and in php file
i get
$start = ($_REQUEST["start"] == null)? 0 : $_REQUEST["start"];
$count = ($_REQUEST["limit"] == null)? 20: $_REQUEST["limit"];
$filterObj = ($_REQUEST["filter"]) ? (json_decode($_REQUEST["filter"])) : null;

and filter getting by getSQL($filterObj) from PHPFilterResolver.php

and i get $filterObj is null so that filters are not applied to store.
plz help
tell me how to apply filter to remote data

dandfra
23 Jan 2009, 1:19 AM
Does the filter have to be passed as JSON? I can build JSON on my server side, but I can't parse it out. I'm used to getting filters in traditional POST strings.

Awesome work!

No, it can be more or less whatever you want. filterModel.getFilterObj() returns you a javascript object. Then is up to you to pass the content of the javascript object to the server and filter accordingly. Look at the documentation of FilterModel.getFilterObj for the description of the format of the obj.

dandfra
23 Jan 2009, 1:25 AM
To devs:
First - Thanks for this great plugin!=D>

Second - I have one but big feature request from my users. We use this plugin with filterCfg:


var filterCfg=[
{id: 'eventname',label: 'snmptt - eventname', type: 'enum', availableValues: snmptt_eventname_store, remoteStore: true},
{id: 'hostname',label: 'snmptt - hostname'}]Soo, for now users can create filter for eventname like ("=","!=","in","not in").
But it would be very nice if we could also create a filter like for textfield too. I.e. "Start with" or "contains" and etc.
Does this will be possible ?

Thanks and sorry for my English.

I think that if you use type: 'string' and set the availableValues you should get what you want

dandfra
23 Jan 2009, 1:44 AM
It's quite strange...
There are 2 possible reasons:
1) filterModel.getFilterObj doesn't return anything. That's strange, but you can check it using firebug I think
2) There is some problem on the server. Can you please check the output of var_export($_REQUEST)?
3) (this one is only a wild guess) it seems from the code you posted on the forrum that that you wrote filte r
store.baseParams=Ext.apply(store.baseParams,{filte r: Ext.util.JSON.encode(filterModel.getFilterObj())}) ;

Let me know if it doesn't work

bhavna
23 Jan 2009, 3:27 AM
$_REQUEST[] work fine because it gets value of start and limit .but only not of filter
even if i used the single statement

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

it doesont work.

please help me...

thanks...

dandfra
23 Jan 2009, 4:01 AM
1) Please check with firebug the value of filterModel.getFilterObj() just before the call to store.load. What is the value?
2) What are the post parameters of the Ajax request (please check them in firebug and post here the result)
3) Since $_REQUEST merges the content of $_GET, $_POST and $_COOKIE are you sure that there is no overriding? Can you please check the value of $_POST['filter'] and post here the value?

It's a bit difficult to help you without some data, please help me helping you ;)

bhavna
24 Jan 2009, 12:14 AM
hi, i checked for values
/^(?:scope|delay|buffer|single)$/for filterOptRe. and operator values and array filter shows right values . but returns null i Cheked all values they all right but store params filter is null . now what is the reasone because of this error occured.... thanks

dandfra
26 Jan 2009, 12:32 AM
Please, answer to question 2 and 3 of my previous post. From what you say the filterManager returns the right object. Now, we have to unserstand why the filter is undefined on the server. And the answer to 2 and 3 are important to understand this.
Ciao

gotcha
19 Mar 2009, 8:52 AM
please try the below code @ http://cherryonext.googlecode.com/svn/demos/demo/dynamicFilter.htm - in firebug mode and run it.

when the window opens up, select field 'fld1' and then click the drop down box against it. It fails with the said error.



Ext.tcFilterCfg=[
{id: 'fld1', label: 'fld1',
availableValues: new Ext.data.SimpleStore({fields: ['label', 'value'],
data: [
["yes","yes"],
["no","no"],
["",""]
]})
},
{id: 'fld2',label: 'fld2'},
{id: 'fld3', label: 'fld3',
availableValues: new Ext.data.SimpleStore({fields: ['label', 'value'],
data: [
["sam","sam"],
["tom","tom"]
]})
}
];

Ext.tcFieldManager=new Ext.ux.netbox.core.FieldManager(Ext.tcFilterCfg);
Ext.tcFilterModel=new Ext.ux.netbox.core.FilterModel(Ext.tcFieldManager);

Ext.tcFilterDialog = new Ext.Window({
title: 'Filters',
scope: this,
width:600,
height:350,
x: 300,
y: 150,
layout: 'border',
modal: true,
closeAction: 'hide',
items: [{ filterModel: Ext.tcFilterModel,
region: 'center',
xtype: 'dynamicFilter'
}]
});
Ext.tcFilterBackup = Ext.tcFilterModel.getFilterObj();
Ext.tcFilterDialog.show();

dandfra
23 Mar 2009, 7:21 AM
Ciao :)

gelleneu
21 Apr 2009, 6:18 AM
Hello,

I tried to migrate my application to Ext 3.0 RC1. But Firebug throws an error:

"sp is undefined"

Now, when i remove my including of the cherryonext.js file, this error is away, but
then, I (correctly) get error messages like "ex.ux.netbox is undefined" etc...

Is somebody here who has a successfully working ext3.0 application with cherry on ext?

ScAndal
21 Apr 2009, 6:20 AM
I was going to ask the same thing. Is anyone planning on converting to 3.0?

dandfra
21 Apr 2009, 7:51 AM
Not at the moment, but when I'll port our application to Ext 3.0 I'll port cherry too...

sergey.s
21 Apr 2009, 9:07 AM
quick and dirty 3.0 support

gelleneu
21 Apr 2009, 10:59 PM
Thanks for your quick help.

But, could you, please, include the changes into the whole cherryonext (minified) file and post it here?

Thanks very much!

sergey.s
21 Apr 2009, 11:08 PM
sure

alexbanda1982
3 Jun 2009, 1:40 PM
Hi! Thaks for this useful plugin. But.... could you help me with an issue??

I don't want to use a mask in "between date" filter. Is posible using the normal DateField in this filter type??

Please help me...

dandfra
9 Jun 2009, 3:03 AM
No, I never tried this one, but it's a good idea.
Patches are welcome :D

gthe
7 Jul 2009, 9:52 AM
No, I never tried this one, but it's a good idea.
Patches are welcome :D

Any news ?

I found problem with Ext.ux.Andrie.Select in cherryonext.js and any CycleButton.

adamwh
9 Jul 2009, 11:08 AM
I don't know why, but after I change the cheryonext.js to your new version my menu does not collapse after I click on it. I am pretty sure that changing cheryonext is the reason. I also tried on the menu example (http://www.extjs.com/deploy/dev/examples/menu/menus.html (http://www.extjs.com/forum/../deploy/dev/examples/menu/menus.html)). The effect is the same - after I include cheryonext - it's broken.
Can someone help?

sergey.s
9 Jul 2009, 9:41 PM
This is because of Ext.menu.BaseItem.prototype.onRender override in PreferenceManagerView.js

Remove/replace it with smth like this (haven't tested):

Ext.override(Ext.menu.BaseItem, {
onRender : Ext.menu.BaseItem.prototype.onRender.createSequence(function() {
if (this.tooltip) {
this.el.dom.qtip = this.tooltip;
}
})
});

adamwh
10 Jul 2009, 2:09 AM
It works!
Thank you very much :)

gthe
10 Jul 2009, 4:58 AM
This is because of Ext.menu.BaseItem.prototype.onRender override in PreferenceManagerView.js



Many Many Many Many thanks !!!!!! :D

buenavida
13 Aug 2009, 7:52 AM
Hi Thanks for the extension.

I wonder if there is any plan to upgrade it to be compatible with Extjs 3.0.0

phedoreanu
19 Oct 2009, 12:53 AM
Hi Thanks for the extension.

I wonder if there is any plan to upgrade it to be compatible with Extjs 3.0.0

I am also curious if you plan to release a version compatible with Ext 3.0.

dandfra
19 Oct 2009, 1:03 AM
...when we'll port our application(s) to Ext 3.0 we will port Cherry too...
Ciao

phedoreanu
19 Oct 2009, 1:09 AM
...when we'll port our application(s) to Ext 3.0 we will port Cherry too...
Ciao

Ok, thanks for the info and the quick reply :D

Stsalomon90
20 Oct 2009, 7:55 AM
...when we'll port our application(s) to Ext 3.0 we will port Cherry too...
Ciao

This is a great extension but we are on 3.0 for our application. Have you guys set a timeline to update your apps?

Thanks!

vishalg
25 Nov 2009, 10:03 AM
+1 for porting to 3.0

dandfra
11 Dec 2009, 4:51 AM
Hi all, just to inform you that we started to port cherry to Ext js 3.
Grab the source from the trunk of the svn repository of cherry on google code.
We didn't test it much, so prabably there are bugs and what not but:
1) the regression suites passes
2) DynamicFilterView, QuickFilter, conetext menu and so on actually works (or so it seems at least).

Ciao

BlueCamel
11 Dec 2009, 10:41 AM
Hi all, just to inform you that we started to port cherry to Ext js 3.
Grab the source from the trunk of the svn repository of cherry on google code.
We didn't test it much, so prabably there are bugs and what not but:
1) the regression suites passes
2) DynamicFilterView, QuickFilter, conetext menu and so on actually works (or so it seems at least).

Ciao

Cool! Might I suggest a 3.x forum thread?

gelleneu
18 Dec 2009, 2:16 AM
Some experiences with Ext 3.1? I think it won't work with 3.1
Including latest release from SVN into my projects will throw errors like:

G is undefined
window.undefined = window.undefined

and

types[config.xtype || defaultType] is not a constructor

Without including cherryonext.js, my application works under Ext3.1 :-).

vmihaylov
11 Jan 2010, 2:59 AM
Hello guys,
Is anyone using cherry on ext 3.1? I have upgraded all parts of my application save for the grid filters, and now they are giving a headache.
- filters with remote stores does not work
- date range field value control does not work
These two issues are blockers for me. Please share your experiences with ext 3.0, 3.1 and cherry .
Thanks in advance for your time.

asbestos girl
4 Feb 2010, 4:53 AM
Hi,
if anybody is struggling to make cherry work with Ext 3.0, I have had the same problem and was helped by dandfra:


Originally Posted by asbestos girl

I would love to use cherryonext filters in the application i am developing, however it is throwing an error when used with ext 3.0 I have your latest code from svn ( version 218) and using it with ext 3.0
I have not even yet used it in my code, merely tried to get your demos work with ext 3.0 and the error i am getting is:

1)
When using ext-base.js:
line 7: H is undefined

When using ext-base-debug.js:
line 233: sp is undefined

2)
allTogether.html:
line 79:
Ext.ux.netbox.core.LocalStoreFilterResolver is not a constructor

I have spent these 3 days searching for a solution online, with no success. Please, cant you point me in the right direction?
It works with ext2 (which is what your online examples are using).

The reason is that we did not perform the 3.0 porting in a good way (I realized the problem with the layout of the repository only now...).
You should look at the 0.3.2.0 branch (no, I don't know why it's there, I'll have to ask...).
In the branch there is not the whole code but only the src directory (i.e. the actual code without the test and the demo).

We'll clean up the situation ASAP, but in the mean time you can svn co from the branch

phedoreanu
4 Feb 2010, 5:23 AM
Awesome! :D

asbestos girl
5 Feb 2010, 7:10 PM
Attached is a perl module implementation, adapted from the php example from this project's google code.

asbestos girl
9 Feb 2010, 3:13 AM
I have started a new thread under the 3.0 folder: http://www.extjs.com/forum/showthread.php?p=435313

smartree
17 Mar 2010, 11:13 PM
http://code.google.com/p/cherryonext/
should be a ref.

dandfra
19 Mar 2010, 6:41 AM
Hi, just to let you know that now on Google Code (http://code.google.com/p/cherryonext/) trunk is moved to support Ext 3.x.
Not all cherry is ported to Ext 3.x. (We are porting as needed in our projects...)
What should work:

Dynamic Filter Manager
Quick Filter
Input Mask


Ciao

daiei27
19 Mar 2010, 10:49 AM
I'd like to check it out, but none of the demos I tried to view produced anything. All blank pages in FF 3.5

daiei27
24 Mar 2010, 9:43 AM
Thanks to whoever fixed the demo at http://cherryonext.googlecode.com/svn/demos/demo/allTogether.htm. Pretty cool!

Edit:
Ahh... almost missed the 3.0 thread...
http://www.extjs.com/forum/showthread.php?p=435313

alexmario
21 Jul 2011, 9:25 AM
Hello all,

15 June 2011: change the Cherry on Ext license

We released a new version of Cherry on Ext just for change the license from LGPL v3 to New BSD.

This change is in accordance with the Ext JS license of course, and will give to the users of our library more flexibility and freedom.

And a new project file for those who want to build using JSBuilder 2.

http://code.google.com/p/cherryonext/

Sorry for late, but forgot the forum. :)

Mario

lopezanibal
15 Nov 2011, 2:23 PM
Hi Marjo,


Any plans to release this nice feature on ExtJS4?


Thx.

Anibal

alexmario
1 Dec 2011, 12:18 PM
Hello Anibal,

for now is not scheduled.

But I thin it's time to move! :)

Maybe next year I try to open a release for extjs4.
Not sure about time as the team is not on this project, so the priority it's very low.

Mario