PDA

View Full Version : Grid Filter (Plugin)



Pages : 1 2 3 [4]

azaqero
30 Apr 2009, 10:32 PM
Hi

I placed the filter numeric, and is rendered wrong, check the screenshot. what's wrong? I'm using EXTjs 2.2.1:((

razvanioan
3 May 2009, 10:15 PM
Check this thread, it was already discussed.

larowlan
5 May 2009, 4:20 PM
Hi

I placed the filter numeric, and is rendered wrong, check the screenshot. what's wrong? I'm using EXTjs 2.2.1:((

In the style.css provided with the file, add

position: relative; to the style definitions for .ux-rangemenu-lt, .ux-rangemenu-gt and .ux-rangemenu-eq

Lee Rowlands
Bundaberg Web Design (http://www.rowlands-bcs.com)

galdaka
6 May 2009, 7:06 AM
Hi,

Any have this extension working in Ext 3.0 rc1.1. I only have a problem with images (View image).

Greetings,

IrishSitar
11 May 2009, 1:55 PM
I was able to solve the GridFilter + PagingMemoryProxy issue. I'll post my solution once I get it cleaned up, but in the meantime if anyone else runs into this contact me and I'll try and help.

Hi tfrugia,

I am having the exact same problem with PagingMemoryProxy and GridFilters that you described in a previous post:

"Has anyone successfully used the PagingMemoryProxy with GridFilters? I have it working, but when I filter it filters each individual page. If I start with 9 pages of 100 and set a filter, it filters each individual page (so I may have 3 rows on page 1, 10 on page 2, etc)."

Do have any example code that you can share on how you fixed this? I have been struggling with this for many hours now -- many thanks for any help!

Daina
15 May 2009, 1:33 AM
Hello,
I am a new ExtJs user. I would like to use the grid filtering but it does not work. My grid is generated and I have no mistakes but I don't have the filter menu in the grid menu. I am not using any Php and I just read a .json file to load my data. Please could you exaplin me what are the requirement to make the grid filter work? I attach my code and the picture of its result. My code file is very long but it include the javascript code required to create grid filter. Only the red part is the grid code.

Thanks for your help,

Mr. Hibernate
15 May 2009, 2:09 AM
.. because the cookie information seems to be not available any more.

Try the following @ http://extjs.com/deploy/dev/examples...id-filter.html (http://extjs.com/forum/../deploy/dev/examples/grid-filtering/grid-filter.html)

Filter by only visible entries.
Click on the price-header so the entries of the grid will be sorted by price by default.
Hit the F5-Button on your Keyboard (or simply reload the page)
The grid entries are sorted by price by default (as we wish..).
Hit F5 again (or simply reload the page).
The grid entries ain't sorted by price any more.This "bug" only occurs if we use the filtering plugin, that means if you only click on the header to sort by price for example, you can reload your ass off and the grid keeps sorted by price..

Some advise?

Kind regards

Mr. Hibernate

gmoney
15 May 2009, 10:39 PM
Hi,

Any have this extension working in Ext 3.0 rc1.1. I only have a problem with images (View image).

Greetings,

Having the same problem here with missing icon images in 3.0rc1.1 in IE only. Did you find a fix yet?

heho2495
23 May 2009, 6:33 PM
I had to changes buildQuery to work with java. Problem is that it doesn't retain the selection on column header after successfully done. I know I have to tweak something on GridFilter.js but not sure what. Can anyone please help?

Here's the code:

<code>
buildQuery: function(filters) {
var p = {};
for (var i = 0, len = filters.length; i < len; i++) {
var f = filters[i];
var root = [this.paramPrefix, '[', i, ']'].join('');
p[root + '.field'] = f.field;
var dataPrefix = root;
for (var key in f.data) {
p[[dataPrefix, '.', key, ''].join('')] = f.data[key];
}
}
return p;
</code>

puyngke
27 May 2009, 1:21 AM
hello guys im quite new with extjs and I like it very much...when I saw this plugin I loved it even more but I have some problems with the image of the greater less equal icons because what happen is that all logo duplicates in the container like for example
*************************
________
< [________]
< _________
> [__________]
> __________
= [___________]
=
*************************
I'm sorry I dont have any screenies with me but the presentation is something like that....but if i remove the css config position:relative then the icons doesn't appear.....thank you guys I hope you can help me fix the problem

Andreas B.
27 May 2009, 3:01 AM
There appears to be a problem getting this plugin working in Ext 3.0 RC1.

Has anyone else tried?


When trying to click a filter checkbox in the drop down menu FireBug reports the following error...

d.itemId is undefined
[Break on this error] Ext.DomHelper=function(){var w=null,l=/^...(Ext.History,new Ext.util.Observable());

Hi all,

I am having the same problem here. Does anyone know more about it?

Greetings,
Andreas

youdie
29 May 2009, 2:27 PM
Hi all,
Quote:
Originally Posted by cherbert http://extjs.com/forum/images/buttons/viewpost.gif (http://extjs.com/forum/showthread.php?p=320006#post320006)
There appears to be a problem getting this plugin working in Ext 3.0 RC1.

Has anyone else tried?


When trying to click a filter checkbox in the drop down menu FireBug reports the following error...

d.itemId is undefined
[Break on this error] Ext.DomHelper=function(){var w=null,l=/^...(Ext.History,new Ext.util.Observable());

Hi all,

I am having the same problem here. Does anyone know more about it?

Greetings,
Andreas

i try with this,
remove
item.itemId.substr(4) at


handleHdMenuClick : function(item){
var index = this.hdCtxIndex;
var cm = this.cm, ds = this.ds;

switch(item.itemId){
case "asc":
ds.sort(cm.getDataIndex(index), "ASC");
break;
case "desc":
ds.sort(cm.getDataIndex(index), "DESC");
break;
default:


index = cm.getIndexById(item.itemId.substr(4));//itemId.substr(4));
if(index != -1){
if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
this.onDenyColumnHide();
return false;
}
cm.setHidden(index, item.checked);
}
}
return true;
},
with
item.getItemId().substr(4)
in ext-all-debug.js

Andreas B.
3 Jun 2009, 3:19 AM
Seems that your solution is working, but I think it's not a good idea to edit the ext library. So I am looking forward for another fix, because this plugin is really great and I want to use it.

Greetings,
Andreas

simonellistonball
4 Jun 2009, 6:06 AM
One way of cludging it without changing the library itself is to have an ext-fix.js file which is included after the library include. This enables you to add things like:



Ext.grid.GridView.prototype.handleHdMenuClick = function(item){
var index = this.hdCtxIndex;
var cm = this.cm, ds = this.ds;
switch (item.getItemId()) {
case "asc":
ds.sort(cm.getDataIndex(index), "ASC");
break;
case "desc":
ds.sort(cm.getDataIndex(index), "DESC");
break;
default:
index = cm.getIndexById(item.getItemId().substr(4));
if (index != -1) {
if (item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1) {
this.onDenyColumnHide();
return false;
}
cm.setHidden(index, item.checked);
}
}
return true;
}

Which solves the problem for me, and avoids breaking anything else.

Basically, it's just getting Ext to use its own encapulation for the itemId.

Simon

Datagenn
4 Jun 2009, 10:00 AM
*Solution below..

The problem:
Many grids with their own stores each make a call to the server but I want only one call, use filters and a paging toolbar.

Solution:
First, I load one main big store with all the data using one server call.


mainBigStore.load();
Then on each of the niche stores I do this to populate just their specific data:


nicheStore1.loadData(mainBigStore.reader.xmlData);
nicheStore2.loadData(mainBigStore.reader.xmlData);
etc..
All this is good until you want to use grid filters and paging toolbars that give "page NaN of blah". Really annoying.

The fix is to add this new function (override) to your Store:



Ext.override(Ext.data.GroupingStore, {
loadFilteredData : function(o, options){
options = options || {};
if(this.fireEvent("beforeload", this, options) !== false){
this.storeOptions(options);
var p = Ext.apply(options.params || {}, this.baseParams);
if(this.sortInfo && this.remoteSort){
var pn = this.paramNames;
p[pn["sort"]] = this.sortInfo.field;
p[pn["dir"]] = this.sortInfo.direction;
}
var r = this.reader.readRecords(o);
this.loadRecords(r, options, true);
return true;
} else {
return false;
}
}
});
Finally populate your niche stores like this:



nicheStore1.loadFilteredData(mainBigStore.reader.xmlData, {add:false,params:{start:0,limit:100}});
nicheStore2.loadFilteredData(mainBigStore.reader.xmlData, {add:false,params:{start:0,limit:100}});
etc..
Bye bye NaN in the paging toolbar and Hello working solution \:D/

Sean

polgara
4 Jun 2009, 11:42 PM
Hello ! I search on the forum an answer bu I can't found one..

So, I have a list filter on a column :


this.storeName = new Ext.data.JsonStore ({
url : 'generator/ServiceName/get.json',
baseParams:{ isName : 'ok'},
root : 'resp.ses.se',
totalProperty: "total",
remoteSort : true,
id : "prod",
fields :['prod']
});

/// GRID FILTERS
this.filters = new Ext.grid.GridFilters({
filters:[
{type : 'list',
dataIndex : 'prod',
store : this.storeName,
labelField : 'prod'
}
]
});

My problem is when I select more than one element of the list, it's send that :


filter[0][data][type] list
filter[0][data][value] value1
filter[0][data][value] value2
filter[0][field] prod

so, i can't use the two values because they are on the same index of the filter... how can I fix it? I have no idea...

thanks.

EDIT : I find my answer, I just forgot to add the property 'phpMode : true', and with that property, the server receive that :


filter[0][data][type] list
filter[0][data][value] value1, value2
filter[0][field] prod

and with that I can do my stuff correctly.

ambience, great job with this plugin !

coriolis
10 Jun 2009, 6:47 PM
1. Is this code compatible with 3.0-RC2?
2. I am getting an error at line 352 of GridFilters.js Ext.ux.grid.filter is undefined

Here are my includes


<link rel="stylesheet" type="text/css" href="ext-3.0-rc2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-3.0-rc2/examples/ux/css/ux-all.css" />

<script type="text/javascript" src="ext-3.0-rc2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/examples/ux/RowEditor.js"></script>

<script type="text/javascript" src="ext-3.0-rc2/ux/grid/GridFilters.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ux/menu/EditableItem.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ux/menu/RangeMenu.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ux/menu/ListMenu.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ux/menu/TreeMenu.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ux/grid/GridFilters.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ux/grid/filter/Filter.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ux/grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ux/grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ux/grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ux/grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ux/grid/filter/BooleanFilter.js"></script>

Thomas Triplet
11 Jun 2009, 12:02 PM
In the style.css provided with the file, add

position: relative; to the style definitions for .ux-rangemenu-lt, .ux-rangemenu-gt and .ux-rangemenu-eq

Lee Rowlands
Bundaberg Web Design (http://www.rowlands-bcs.com)

Using ExtJS 3.0-RC2, the icon are duplicates (appear twice) when using the
position: relative; (see screenshot). Any idea on how to fix this? Plus the icon for the text filter is slightly too big (compared to the reference design of the author of this great plugin :P)

http://img194.imageshack.us/img194/6843/screenshot001u.png


Also, the link for the PHP back-end is dead. Does anyone know where I can get t he full source of the example?
Thanks

Also, the link for the PHP back-end seems to be dead. Does anyone know where I can get it?

Thanks

alexi
15 Jun 2009, 10:31 AM
@LeviOu: Try adding id option for JsonReader:



reader: new Ext.data.JsonReader({
totalProperty: "totalPorperty",
root: "result",
id: "id",
fields: [
{ name: 'id' },
{ name: 'text'}
]
})


I don't know for sure, but give it a try...

I'm using the following store configuration for my list filters, and are working fine (I've even made an override for changing the name of the filter sent to the server, it's described above on this page):



var domainFilterStore = new Ext.data.JsonStore({
autoLoad: true
,url: 'path/to/proxy.php'
,root: 'data'
,id: 'id'
,fields: [
{name: 'id', type: 'int'}
,{name: 'value', type: 'string'}
]
,baseParams: {
type: 'filterList'
}
});



It's initialized like any other filter — by passing the field name of a column of the grid:




// provided that you have the following fields in your grid: serv_name, supp_name etc.

var filters = new Ext.ux.grid.GridFilters({
filters:[{
type: 'combo',
dataIndex: 'serv_name',
options: services
}, {
type: 'combo',
dataIndex: 'supp_name',
options: suppliers
}, {
type: 'combo',
dataIndex: 'agen_name',
options: agencies
}
]});


Illiarian, trying to get the 'combo filter to work.
What is the purpose of the 'options' attribute?
Is that a store variable for the appropriate combobox?

Your help is appreciated. Thank you.

azbok
15 Jun 2009, 2:19 PM
These fixes seem to work in Firefox and IE6.
I did notice in IE6 that gridfilter text icon isn't even displayed.

Edit: ux/menu/EditableItem.js

To rid the duplicates: Replace the html with an empty string


onRender: function(container){
var s = container.createChild({
cls: this.itemCls,
html: ''
// html: '<img src="' + (this.icon||Ext.BLANK_IMAGE_URL)+ '" class="x-menu-item-icon'+(this.iconCls?'\
'+this.iconCls:'')+'" style="margin: 3px 7px 2px 2px;" />'
});
To fix up the alignments, add this to the styles:


img.ux-gridfilter-text-icon {
top: 5px;
left: 5px;
}

img.ux-rangemenu-gt,
img.ux-rangemenu-lt,
img.ux-rangemenu-eq {
position: relative;
top: 2px;
left: -23px;
}

li.x-menu-list-item div {
display: inline;
}


The filter box is too wide for the numeric filter.

chaoszcat
15 Jun 2009, 6:38 PM
If you have the problem similar to the posted image below (duplicate icon), do the following. Thanks to azbok (http://extjs.com/forum/showthread.php?p=343922#post343922) for the inspiration :):)

(Tested with Extjs 3.0 RC2, GridFilter 0.2.8)

Go to menu/EditableItem.js, and remove the html part.


var s = container.createChild({
cls: this.itemCls,
html: '',
//html: '<img src="' + (this.icon||Ext.BLANK_IMAGE_URL)+ '" class="x-menu-item-icon'+(this.iconCls?' '+this.iconCls:'')+'" style="margin: 3px 7px 2px 2px;" />'
});


And apply a css fix


img.ux-gridfilter-text-icon,
img.ux-rangemenu-gt,
img.ux-rangemenu-lt,
img.ux-rangemenu-eq {
top: 3px;
left: 5px;
position: relative;
margin-right:10px;
}

li.x-menu-list-item div {
display: inline;
}

li.x-menu-list-item-indent {
padding:0px;
}


Hope it works for you. It works perfectly fine on my Safari 4.0, Firefox 3.0.11. Not sure about IE coz I'm on Mac now :D
:)):))

azbok
16 Jun 2009, 9:54 AM
Those css updates fix the width problem, thanks!

It works for me in Linux Firefox 3.0.4 but in windows IE6, the icons don't show. I'm not sure about other IE versions. I figure somehow the icons are cropped out somehow.

chaoszcat
16 Jun 2009, 10:04 AM
I think for IE just do some IE check-and-fix. Anyone with IE installed care to share his code? :D (Lazy to boot windows!)

coriolis
16 Jun 2009, 10:07 AM
will these findings be incorporated into the next release of GridFilter?

Thanks

sabiola
16 Jun 2009, 11:14 PM
Hello,


will these findings be incorporated into the next release of GridFilter?


the question here is, _who_ is working on a new version of GridFilter?

I wrote a mail to the original author of the extension.
This is the answer i got:

Hi Stefan,

Unfortunately the product I work on has not made the jump to 3.0 yet (and it may be some time yet), so I can't devote any time at work to updating them. Additionally, I 'gave' the Ext team ownership of the filters about a year and half ago, and I am not exactly sure who maintains it. I do remember reading that Jack was working on some "Vista Style" filters however. Sorry =\

--Steve

Greetings,
Stefan

chaoszcat
17 Jun 2009, 12:03 AM
In anyway this is a great plugin to be included in Extjs. :D

calavera
17 Jun 2009, 1:40 AM
So I guess nobody has this issue. I have inspected the "misplaced" input field with Firebug when it occurred and noticed a style attribute: position: fixed; . If I use the Firebug CSS simulator/editor and I change the element style from position fixed to position absolute, guess what ? It jumps back into its place. So I might be wrong but this could be the solution. The problem is that the input element doesn't take its position:fixed property from any of the CSS file. Instead, it has a property: style="position:fixed;" attached to it. So I need to go deep into the field generation and edit the property there or something. Any ideas for how could I modify there as it doesn't take the position attribute from any of the CSS files ?

I have attached a screenshot. Maybe someone can help. Thank you!

Any new ideas on this issue: https://extjs.com/forum/showthread.php?p=277993#post277993 ?

Thanks.

azbok
17 Jun 2009, 9:11 AM
Any new ideas on this issue: https://extjs.com/forum/showthread.php?p=277993#post277993 ?

Thanks.

Ideally all the style stuff should be in the CSS files, so if you wanted to monkey with the code, I'd feel free to edit the code with the style="position:fixed" and adjust the css. I figure there's 2 basic strategies: 1) Do any sorta hack to make things work in the various browsers 2) Once it works, then its much easier to do a more "proper" fix whatever that may be.

The way I derived the styles I posted a few posts ago was just thru Firebug trial and error. Since the author of the plugin has no time, it's basically up to the community to figure it all out and get it working for ourselves.

As for the error you are getting with the random scrambling... that is very odd. The items are being rendered differently from time to time I guess. That's generally a hard problem to find.

I think it would be awesome if the Grid Filter plugin eventually gets put into the core of Ext!

mjlecomte
17 Jun 2009, 10:40 AM
I'm the one that posted this ux to the ux repo in my signature.

This ux was removed from svn and examples as it needed some attention to get it working for 3.x. In 3.x the "example classes" like this one and others have been moved to the "ux" directory for consistency etc.

I haven't been able to keep up with all the posts of changes in this thread. If anyone has suggested fixes for 3.x compatiblity feel free to pm me and I'll do what I can to see they get implemented.

Thomas Triplet
17 Jun 2009, 11:18 AM
If you have the problem similar to the posted image below (duplicate icon), do the following. Thanks to azbok (http://extjs.com/forum/showthread.php?p=343922#post343922) for the inspiration :):)

(Tested with Extjs 3.0 RC2, GridFilter 0.2.8)

Go to menu/EditableItem.js, and remove the html part.


var s = container.createChild({
cls: this.itemCls,
html: '',
//html: '<img src="' + (this.icon||Ext.BLANK_IMAGE_URL)+ '" class="x-menu-item-icon'+(this.iconCls?' '+this.iconCls:'')+'" style="margin: 3px 7px 2px 2px;" />'
});


And apply a css fix


img.ux-gridfilter-text-icon,
img.ux-rangemenu-gt,
img.ux-rangemenu-lt,
img.ux-rangemenu-eq {
top: 3px;
left: 5px;
position: relative;
margin-right:10px;
}

li.x-menu-list-item div {
display: inline;
}

li.x-menu-list-item-indent {
padding:0px;
}


Hope it works for you. It works perfectly fine on my Safari 4.0, Firefox 3.0.11. Not sure about IE coz I'm on Mac now :D
:)):))

Worked just great! Thanks a lot for the patch

coriolis
19 Jun 2009, 5:49 AM
I have a situation where I have multiple columns with active filter and then when I try to unclick one filter to take it out of consideration, the checkbox is not clickable. I cannot take a filter of play.

I am using 0.2.8.

Thanks
Ed

sabiola
22 Jun 2009, 2:02 AM
Hello,

I added a thread about the GridFilter Extension to the 3.x Extensions Board:
http://www.extjs.com/forum/showthread.php?t=72024

I think, this is a better place to discuss 3.x problems.

Greetings,
Stefan

Sesshomurai
22 Jun 2009, 5:28 AM
Hey guys,
Great work keeping this plugin working! I spent about 30 minutes trying to cull this thread for an answer.

But is there a way to get the filter params from the grid so I can create a URL from key/value pairs?

I need to do this programmatically.

Thanks for any tips!

hendricd
22 Jun 2009, 5:30 AM
the Filters class has a nice getState method that returns a nice hash of all active Filters.

Sesshomurai
22 Jun 2009, 6:08 AM
the Filters class has a nice getState method that returns a nice hash of all active Filters.

Gracias Amigo!

martinorth
23 Jun 2009, 7:33 AM
Hi,

I have a working list filter wich gets data from a store. The problem is that the menue does not collapse(close) when I select an option from the menu. I have to click elsewhere on the screen to close the menu.


var filters = new Ext.ux.grid.GridFilters({menuFilterText: 'Filter', filters:[
{type: 'list', store: hersteller, labelField: 'hname', single: true, dataIndex: 'hname'},
{type: 'string', dataIndex: 'artikelnr', icon: 'ux-gridfilter-text-icon'},
{type: 'string', dataIndex: 'ean', icon: 'ux-gridfilter-text-icon'},
{type: 'date', dateFormat: 'Y-m-d', dataIndex: 'datetimeadded', beforeText: 'vor dem', afterText: 'nach dem', onText: 'genau am'},
{type: 'string', dataIndex: 'pname', icon: 'ux-gridfilter-text-icon'}
]});I use Version 0.2.8, maybe that's the problem.

Any hints?

Thanks Martin

I found the solution. It is not a bug it's a feature. The menu should not collapse if you want to select multiple options but if it is allowed to only select a single option (single: true) I set hideOnClick: true. Take a look at line 71 of ListMenu.js.

simply change hideOnClick: false to hideOnClick: this.single

mjlecomte
23 Jun 2009, 7:55 AM
the Filters class has a nice getState method that returns a nice hash of all active Filters.

Do you mean saveState? But that doesn't seem right either.

yourGrid.filters.getFilterData() seems like a viable option.

igor_vlad
29 Jun 2009, 4:42 AM
Hello, I used the filter plug-in with the Ext-2.0 and it was working perfectly.
I just noted that after upgrade to Ext-2.2.1 I have a problem with Filters (see attachments).
The bug is reproducible on IE7 and Firefox3

And also on samples page I see the same effect
http://extjs.com/deploy/dev/examples/grid-filtering/grid-filter.html (http://extjs.com/forum/../deploy/dev/examples/grid-filtering/grid-filter.html)

Any solution?
Thank you.

azbok
29 Jun 2009, 9:28 AM
Hello, I used the filter plug-in with the Ext-2.0 and it was working perfectly.
I just noted that after upgrade to Ext-2.2.1 I have a problem with Filters (see attachments).
The bug is reproducible on IE7 and Firefox3

And also on samples page I see the same effect
http://extjs.com/deploy/dev/examples/grid-filtering/grid-filter.html (http://extjs.com/forum/../deploy/dev/examples/grid-filtering/grid-filter.html)

Any solution?
Thank you.

Myself and chaoszcat (http://extjs.com/forum/member.php?u=74912) developed a solution:
http://extjs.com/forum/showthread.php?p=343966#post343966

For me though, last time I experimented with that solution, icons don't show in IE6, but worked in Firefox3. It may work in IE7, I dunno.

arkrohne
1 Jul 2009, 11:37 AM
I noticed there were many implementations of the server side code for this, but after a lot of searching, I cannot find anything in ASP. Does such code exist?

Remy
1 Jul 2009, 12:32 PM
Not sure what you mean by that exactly but I use ExtJs and Classic ASP, do you mean triggering filtering via an ajax call? It's very similar to PHP I set autoReload:true on my filter config, then in the .ASP page, something like:



'The First Filter will be 0
iFilterCount = 0
bFiltersFound = false
strFilterField = "EmptyString"
Do While strFilterField <> ""
StrFilterField = Request("filter[" & iFilterCount & "][field]")
strFilterType = Request("filter[" & iFilterCount & "][data][type]")
strFilterComparison = Request("filter[" & iFilterCount & "][data][comparison]")
strFilterValue = Request("filter[" & iFilterCount & "][data][value]")

'If a filter was found add it to the Array
if strFilterField <> "" then
bFiltersFound = True
Redim preserve arrFilters(3,iFilterCount)
arrFilters(0,iFilterCount) = strFilterField
arrFilters(1,iFilterCount) = strFilterType
arrFilters(2,iFilterCount) = strFilterComparison
arrFilters(3,iFilterCount) = strFilterValue
end if

iFilterCount = iFilterCount + 1

Loop

I retrieve the filters from the request object and place them in a multi-dimentional array. After retrieving them, I can loop through this array and build SQL statements to retrieve the filtered data.

wiznia
7 Jul 2009, 9:15 AM
Hi everybody! I've been using this plugin for a while, and I always had doubt of why the phpMode option was there.
I see that when it's on, it joins all the values with ",", because if you don't do so, despite you send 2 values, it just gets one of them. This would be an example of the params sent:
filter[0][field] = fieldName
filter[0][data][type] = list
filter[0][data][value] = Value1
filter[0][data][value] = Value2
Here, php ignores one of the values. The fix I made transforms that request would be:
filter[0][field] = fieldName
filter[0][data][type] = list
filter[0][data][value][] = Value1
filter[0][data][value][] = Value2

So, you don't need to do anything on the server, it is received as an array. Besides, you don't have to worry if the values you send have a "," or not.
Here is the fix:



buildQuery: function(filters){
var p = {};
for(var i=0, len=filters.length; i<len; i++){
var f = filters[i];
var root = [this.paramPrefix, '[', i, ']'].join('');
p[root + '[field]'] = f.field;

var dataPrefix = root + '[data]';
for(var key in f.data) {
p[[dataPrefix, '[', key, ']' + (Ext.type(f.data[key]) == 'array' ? '[]' : '')].join('')] = f.data[key];
}
}

return p;
},
Is this ok or am I missing something? Does this work in other enviornments than php?

zkhalid
11 Jul 2009, 6:01 AM
Can anybody please tell me how to specify store in grid filters. I managed to specify the store but how to get the values coming from store into this filter.


var filters = new Ext.grid.GridFilters({filters:[
{
type: 'list',
dataIndex: 'category',
store:myStore // store is set but two rows displaying undefined
,phpMode:true
}

Now store is set to myStore but how to set list to the values coming from store.???

hendricd
11 Jul 2009, 1:48 PM
Can anybody please tell me how to specify store in grid filters. I managed to specify the store but how to get the values coming from store into this filter.


var filters = new Ext.grid.GridFilters({filters:[
{
type: 'list',
dataIndex: 'category',
store:myStore // store is set but two rows displaying undefined
,phpMode:true
}
Now store is set to myStore but how to set list to the values coming from store.???

@zkhalid -- Since it's implemented as a plugin for GridPanel, treat it as such:


var filters;
new Ext.GridPanel( {
...
plugins: filters = new Ext.grid.GridFilters({filters:[.....], ...})
});
Had a look at the demo example yet?

zkhalid
12 Jul 2009, 11:30 PM
Yes but could not find what i was looking for. Can you please specify what i need to do to get this functionality?

Thomas Triplet
14 Jul 2009, 6:56 AM
Can anybody please tell me how to specify store in grid filters. I managed to specify the store but how to get the values coming from store into this filter.


var filters = new Ext.grid.GridFilters({filters:[
{
type: 'list',
dataIndex: 'category',
store:myStore // store is set but two rows displaying undefined
,phpMode:true
}

Now store is set to myStore but how to set list to the values coming from store.???

I've got the same issue: the list displays the proper number of items, but not the labels of the items, just a bunch of checkboxes :-/

tobiu
14 Jul 2009, 10:41 AM
hi thomas,

if you have the same issue, then the same answer of doug should be interesting for you too ;)



@zkhalid -- Since it's implemented as a plugin for GridPanel, treat it as such:


var filters;
new Ext.GridPanel( {
...
plugins: filters = new Ext.grid.GridFilters({filters:[.....], ...})
});

Had a look at the demo example yet?


kind regards, tobiu

elDub
16 Jul 2009, 12:25 PM
It's been a while since I implemented this, so I hope I have the latest source code, but here goes.

We wanted to use the intelligence of the Grid Filter plugin, but to have the actual setting of the filter values extracted to a pop-up window so that the user could easily see all the filters in place. The way I approached it was to declare all the filters with the attribute of showMenu: false, and then just use the filter methods to set and clear the values. This has worked great so far with only a small glitch which I'm not quite certain why it only happens at this one specific time. But without getting into great detail of what that is, can someone tell me if the following assessment is correct?

In the GridFilters.onStateChange method it updates the checked state of the menu without checking to see if showMenu was set to true. Would the following change be accurate/warranted?



if(filter == this.getMenuFilter() && this.showMenu)
this.menu.setChecked(filter.active, false);

freepopo
27 Jul 2009, 12:17 AM
Hi there!

I would just like to know if this plugin is compatible with the groupingstore one ?
Or is there already a way to group rows in this plugin ?

Thanks in advance

foxmarco
29 Jul 2009, 9:34 AM
If you have the problem similar to the posted image below (duplicate icon), do the following. Thanks to azbok (http://extjs.com/forum/showthread.php?p=343922#post343922) for the inspiration :):)

(Tested with Extjs 3.0 RC2, GridFilter 0.2.8)

Go to menu/EditableItem.js, and remove the html part.


var s = container.createChild({
cls: this.itemCls,
html: '',
//html: '<img src="' + (this.icon||Ext.BLANK_IMAGE_URL)+ '" class="x-menu-item-icon'+(this.iconCls?' '+this.iconCls:'')+'" style="margin: 3px 7px 2px 2px;" />'
});
And apply a css fix


img.ux-gridfilter-text-icon,
img.ux-rangemenu-gt,
img.ux-rangemenu-lt,
img.ux-rangemenu-eq {
top: 3px;
left: 5px;
position: relative;
margin-right:10px;
}

li.x-menu-list-item div {
display: inline;
}

li.x-menu-list-item-indent {
padding:0px;
}
Hope it works for you. It works perfectly fine on my Safari 4.0, Firefox 3.0.11. Not sure about IE coz I'm on Mac now :D
:)):))

it dont resolve the problem in IE6. i cant see any icons. Any other solutions?

azbok
30 Jul 2009, 6:05 AM
I also need to fix the problem for IE (IE6 anyway), but I haven't gotten a chance to work on that yet. That icon problem has been around for a little while now but not many people have posted about it, so it's high priority yet.

mjlecomte
30 Jul 2009, 10:54 AM
There's a 3.x version in svn now for those interested, click here (http://extjs.com/forum/showthread.php?t=76185).

arkrohne
4 Aug 2009, 8:16 AM
Looking through the docs/examples, I don't see a clear way of serialising/saving the current filter settings. Basically, people using the application I'm working on often use 2 or 3 different settings all the time, and would like to be able to save the settings, and quickly switch between them. The bit I'm having trouble with is figuring out how to get the filters current state in an easy to save (and restore) fashion. Does such a method exist? I know that I can keep one state between sessions, with the ext.state.Manager, but I'm not sure how to go about saving multiple states for the filters. filter.getFilterData seems promising, but I don't quite see how to load that data back in.

arkrohne
4 Aug 2009, 10:55 AM
Looking through the docs/examples, I don't see a clear way of serialising/saving the current filter settings. Basically, people using the application I'm working on often use 2 or 3 different settings all the time, and would like to be able to save the settings, and quickly switch between them. The bit I'm having trouble with is figuring out how to get the filters current state in an easy to save (and restore) fashion. Does such a method exist? I know that I can keep one state between sessions, with the ext.state.Manager, but I'm not sure how to go about saving multiple states for the filters. filter.getFilterData seems promising, but I don't quite see how to load that data back in.
And in reply to myself, I finally figured it out. filters.saveState and filters.applyState does exactly what I need, especially when I remember to do a filters.reload()!

renoye
6 Aug 2009, 4:13 PM
anyone found a solution for the icon issue on IE? I believe it is css issue.
It seems IE do not like image tag has a backgroud-image style.

euphORIA
10 Aug 2009, 6:42 AM
Very nice plaugin! Many thanks!

The only problem that I have, as some others have pointed before me, is that the filter is not working correctly for a grid with pagination and a local store.

It is only taking into account the data in the current page. Is there a solution for this problem?

Thanks again!

*Edit: I have used renoye method and it seems to work. I don't know if this hack would be the best option but I appreaciate the code :)

euphORIA
12 Aug 2009, 7:59 AM
I have another issue, this time with the initial load of the grif.

I am again using a local store, and passing some initialization values for some filters, but they are not taked into account. I mean, the filters are initialized but they are not applied to the grid.

I suppose that I am missing something obvious but I don't see where the problem could be. As far as I understood, this problem was fixed a long time ago (link (http://extjs.com/forum/showthread.php?p=84912#post84912)).



var title = 'GridPanel Title';

var iconClass = 'icon-page';

var store = new Ext.data.Store({
proxy: new Ext.ux.data.PagingMemoryProxy(withMeetingArray),
reader: new Ext.data.ArrayReader({}, [
{name: ''},
{name: 'procId'},
{name: 'dclId'},
{name: 'dg'},
{name: 'refDg'},
{name: 'procType'},
{name: 'cote'},
{name: 'procNumber'},
{name: 'title'},
{name: 'meetingDate', type: 'date', dateFormat: 'd/m/Y'}]),
sortInfo: {field: 'cote', direction: 'DESC'},
remoteSort: true
});

var columns = [
{id:'procId', header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderSubtypeAndBasculement},
{header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderClassIcon},
{header: "DG", width: 100, sortable: true, dataIndex: 'dg'},
{header: "Référence Interne", width: 150, sortable: true, dataIndex: 'refDg'},
{header: "Ordre du jour", width: 100, sortable: true, dataIndex: 'meetingDate', renderer: Ext.util.Format.dateRenderer('d/m/Y')},
{header: "N° de proc.", width: 100, fixed: true, sortable: true, dataIndex: 'procNumber'},
{header: "N° de cote", width: 100, fixed: true, sortable: true, dataIndex: 'cote'},
{header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderPrintLink},
{header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderLink}
];

var filters = new Ext.ux.grid.GridFilters({
filters:[
{type: 'string', dataIndex: 'dg'},
{type: 'string', dataIndex: 'refDg'},
{type: 'date', dataIndex: 'meetingDate', dateFormat: 'd/m/Y', value: {on: Date.parseDate('01/01/1901','d/m/Y')}}, <-- Not considered
{type: 'string', dataIndex: 'procNumber'},
{type: 'string', dataIndex: 'cote'}
],
local: true
});

...

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
collapsible: true,
autoHeight: true,
iconCls: iconClass,
border: true,
title: title,
style: 'padding:0px 0px 5px 0px',
plugins: [
new Ext.ux.MaximizeTool(),
new Ext.ux.grid.AutoSizeColumns(),
filters
],
viewConfig: {
forceFit: true,
scrollOffset: 0,
getRowClass: function(record, index){
return (record.data.procType + '-row');
}
},
bbar: pagingToolBar

});

// Trigger the store load
store.load({params:{start:0, limit:10}});

grid.on('render', function() {
grid.tip = new Ext.ToolTip({
view: grid.getView(),
target: grid.getView().mainBody,
delegate: '.x-grid3-row',
trackMouse: true,
renderTo: document.body,
listeners: {
beforeshow: function updateTipBody(tip) {
var idx = tip.view.findRowIndex(tip.triggerElement);
var record = grid.getStore().getAt(idx);
tip.body.dom.innerHTML = "Titre: " + record.get('title');
}
}
});
});

euphORIA
14 Aug 2009, 1:23 AM
My problem was a consequence of renoye suggestion to fix the problem of filtering with pagination.

The solution for me was to change lines 63- 67 from:


if(this.local){
this.store.on('load', function(store){
store.filterBy(this.getRecordFilter());
store.proxy.customFilter = this.getRecordFilter();
}, this);
} else {to


if(this.local){
this.store.clearFilter(true);
this.store.proxy.customFilter = this.getRecordFilter();
this.store.load({params:{start: 0, limit: 10}});
} else {

small dragon
15 Aug 2009, 7:30 PM
This is my asp server side implemention.
Codes:


s=request("start"):l=request("limit"):flds=unescape(request("fields")):q=unescape(request("query")):i=0:fld="":dtyp="":dv="":dcp=""tr=""
do while true
fld=request("filter["&i&"][field]")ym=" like "ym1="'"ym2="%"
if fld="" then exit do
dtyp=request("filter["&i&"][data][type]")
dv=unescape(request("filter["&i&"][data][value]"))
dcp=request("filter["&i&"][data][comparison]")
if dtyp="numeric" or dtyp="date" then
sym2=""
if dtyp="numeric" then sym1=""
select case dcp
case "lt"
sym="<"
case "gt"
sym=">"
case "eq"
sym="="
end select
if dtyp="date" then sym=" "&sym&" "
if dtyp="date" and instr(dv,"/")<>0 then
a1=split(dv,"/")
dv=a1(2)&"-"&a1(0)&"-"&a1(1)
end if
elseif dtyp="list" then
a1=split(dv,","):dv=""
for j=0 to ubound(a1)
dv=dv&",'"&a1(j)&"'"
next
if dv<>"" then dv=mid(dv,2)
str=str&" and "&fld&" in("&dv&")"
end if
if dtyp<>"list" then str=str&" and "&fld&sym&sym1&sym2&dv&sym2&sym1
i=i+1
loop
if str<>"" then
str=mid(str,6)
set d_cond=dT.getParsedCond(cond)
cond=d_cond("cond")
if cond<>"" then
set rg=new RegExp
rg.pattern="^(.+)(order by.+)$"
rg.ignorecase=true
if rg.test(cond) then
cond=rg.replace(cond,"$1and ("&str&") $2")
else
rg.pattern="^(order by.+)$"
if rg.test(cond) then
cond=rg.replace(cond,str&" $1")
else
cond=cond&" and ("&str&")"
end if
end if
set rg=nothing
else
cond=str
end if
set d_cond=nothing
end if
response.Write dT.getJsonData(tId,s,l,flds,q,cond)

zkhalid
23 Aug 2009, 9:28 PM
Hi All

I need some help regarding the extJS filters. How can i get all the filters that a user has set on the grid??? Means if user selects a filter with selected value HIGH i want to show it somewhere (may be in an extra row) his current filter selection. for eg. if selected filter name is priority and user selected HIGH i want to show Priority-> HIGH.

euphORIA
27 Aug 2009, 6:35 AM
Hi All

I need some help regarding the extJS filters. How can i get all the filters that a user has set on the grid??? Means if user selects a filter with selected value HIGH i want to show it somewhere (may be in an extra row) his current filter selection. for eg. if selected filter name is priority and user selected HIGH i want to show Priority-> HIGH.

In my case I am just updating the grid title but for your case you could use something similar:


/** private **/
applyState: function(grid, state){
this.suspendStateStore = true;
this.clearFilters();
if(state.filters) {
var activeFilters = false;
for(var key in state.filters){
var filter = this.filters.get(key);
if(filter){
filter.setValue(state.filters[key]);
filter.setActive(true);
activeFilters = true;
}
}

var filterMark = " ***";
var title = this.grid.title;
var filterMarkIndex = title.indexOf(filterMark);
if (activeFilters) {
if (filterMarkIndex == -1) {
this.grid.setTitle(title + filterMark);
}
} else {
if (filterMarkIndex > 0) {
this.grid.setTitle(title.substring(0, title.indexOf(filterMark)));
}
}
}

this.deferredUpdate.cancel();
if(this.local)
this.reload();

this.suspendStateStore = false;
},

/** private **/
saveState: function(grid, state){
var filters = {};
var activeFilters = false;
this.filters.each(function(filter){
if(filter.active) {
filters[filter.dataIndex] = filter.getValue();
activeFilters = true;
}
});

var filterMark = " ***";
var title = this.grid.title;
var filterMarkIndex = title.indexOf(filterMark);
if (activeFilters) {
if (filterMarkIndex == -1) {
this.grid.setTitle(title + filterMark);
}
} else {
if (filterMarkIndex > 0) {
this.grid.setTitle(title.substring(0, title.indexOf(filterMark)));
}
}


return state.filters = filters;
},

ostghost
15 Sep 2009, 8:06 AM
when i build grid for first time method to access filters

Ext.getCmp('gridId').filters.getFilterData()

works fine

but when i reopen tab and re render grid, filters are set up ok but calling getFilterData() throw exception

Ext.getCmp("gridId").filters.getFilterData is not a function

ideas?

djarquin
17 Sep 2009, 9:02 AM
I used it with ASP.NET, I only have to add a number of filters parameter to make it work:

At GridFilters.js:



buildQuery: function(filters){
var p = {};
// THIS IS THE ONE!!!!
p['nfilters'] = filters.length;
for(var i=0, len=filters.length; i<len; i++){
var f = filters[i];
var root = [this.paramPrefix, '[', i, ']'].join('');
p[root + '[field]'] = f.field;

var dataPrefix = root + '[data]';
for(var key in f.data)
p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];
}

return p;
},



And the ASP.NET:




//USERS FILTERS: JUAN F.,DAVID JACOB JARQUIN FUJ., FUJAR USERS, ETC...
private void addFilters() {
int nfilters = Convert.ToInt32(Request.QueryString["nfilters"]);
string field, type, comparison, value;
for (int i = 0; i < nfilters; i++) {
field = Convert.ToString(Request.QueryString["filter["+i.ToString()+"][field]"]);
type = Convert.ToString(Request.QueryString["filter[" + i.ToString() + "][data][type]"]);
comparison = Convert.ToString(Request.QueryString["filter[" + i.ToString() + "][data][comparison]"]);
value = Convert.ToString(Request.QueryString["filter[" + i.ToString() + "][data][value]"]);
}
}

djarquin
17 Sep 2009, 9:09 AM
I also need to fix the problem for IE (IE6 anyway), but I haven't gotten a chance to work on that yet. That icon problem has been around for a little while now but not many people have posted about it, so it's high priority yet.
I fixed it modifiying the EditableItem.js, in the onRender callback, I change the html property:



onRender: function(container){
var s = container.createChild({
cls: this.itemCls,
html: '<img src="' + this.iconCls + '" class="x-menu-item-icon" style="position: static; margin: 3px 3px 2px 2px;" />'
}
);


A dirty one, but it helps

djarquin
17 Sep 2009, 9:14 AM
I have a dirty one, i hope it help you:

EditableItem.js, I changed the html property,jajaja


onRender: function(container){
var s = container.createChild({
cls: this.itemCls,
html: '<img src="' + this.iconCls + '" class="x-menu-item-icon" style="position: static; margin: 3px 3px 2px 2px;" />'
}
);


and the index.js


Ext.onReady(function() {
Ext.ux.menu.RangeMenu.prototype.icons = {
gt: 'img/greater_then.png',
lt: 'img/less_then.png',
eq: 'img/equals.png'
};

DevNullBinary
23 Sep 2009, 5:20 AM
Does anybody tried merge or use HeaderGroup plugin and Grid Filter ? Or do you have any suggestions for extension which contains both of the mentioned features ? I need have Group headers and use grid filters.

Thanks for advice

dgubber
25 Sep 2009, 6:28 PM
When using the grid filter, I opted to create a new instance of the grid and grid store from a treeClick function, so that I could add a filter based on what was clicked in the tree, and use that as a base to the column filtering.

oIDSelect is set by reading the n.id entity and I added it in to be detected in the php filter.



Store_DNS = new Ext.data.JsonStore({
url: "php/get-nodes1.php?origin="+oIDSelect,
storeId: 'Store_DNS',
root: 'root',
idProperty: 'srid',
fields: [
{name: 'srid', type: 'int'},
{name: 'ssid', type: 'int'},
{name: 'origin', type: 'string'},
{name: 'name', type: 'string'},
{name: 'type', type: 'string'},
{name: 'data', type: 'string'},
{name: 'priority', type: 'string'},
{name: 'ttl', type: 'string'}
]
});
Store_DNS.load();

gridDNS = new Ext.grid.GridPanel({
id: 'grid-DNS',
store: Store_DNS,
plugins: [filterDNS],
autoExpandColumn: 'data',
loadMask: {msg: 'Loading Data...'},
cm: new Ext.grid.ColumnModel([
{header: "Origin", width: 150, sortable: true, dataIndex: 'origin'},
{header: "Record Name", width: 150, sortable: true, dataIndex: 'name'},
{header: "Record Type", width: 100, sortable: true, dataIndex: 'type'},
{header: "Data", width: 200, sortable: true, dataIndex: 'data', id: 'data'},
{header: "Priority", width: 80, sortable: true, dataIndex: 'priority'},
{header: "TTL", width: 80, sortable: true, dataIndex: 'ttl'}
]),
sm: rm,
viewConfig: {
autoFill: false
},
// inline toolbars
tbar:[{
id: 'addDNS-entry',
text: 'Add DNS Entry',
tooltip: 'Add a new DNS entry',
handler: function(n) { optClick(this, n); },
iconCls: 'add'
},'-',{
id: 'delDNS-entry',
text: 'Del DNS Entry',
tooltip: 'Delete selected items',
handler: function(n) { optClick(this, n); },
iconCls: 'remove'
}, '-', {
id: 'updDNS-entry',
text: 'Record Update',
tooltip: 'Update a DNS entry',
handler: function(n) { optClick(this, n); },
iconCls: 'option'
}, '-', {
id: 'updDNS',
text: 'Push DNS',
tooltip: 'Refresh Active DNS',
handler: function(n) { optClick(this, n); },
iconCls: 'update'
}],
x: 2,
y: 2,
anchor: '-2 -2',
frame: true
});

var nGrid = {
id: 'panel-nDNS',
title: 'DNS Zone Listing',
layout: 'absolute',
defaults: {
bodyStyle: 'padding:1px;',
frame: true
},
items:[gridDNS]
};



So far it all actually works, with one exception. When I click back and forth over multiple tree selections, eventually I'll get 2 sets of identical drop downs in the filter menu. Both copies of the Sort Ascending and Descending work but only one set of the column disable check boxes and the filter itself works.

Has anyone else seen this set of syptoms?

Dan

coriolis
29 Sep 2009, 8:46 AM
Hi,

Can someone point me to a download link for the complete packaged application?

Also, the screencast of the documentation has a "ux" section. Where do we get this "ux" section? I am using the online documentation because the downloaded docs do not work for me.

Thanks

azaqero
29 Sep 2009, 9:12 AM
Hi,

Can someone point me to a download link for the complete packaged application?

Also, the screencast of the documentation has a "ux" section. Where do we get this "ux" section? I am using the online documentation because the downloaded docs do not work for me.

Thanks

Hi

Only download the last version 0.2.8 i think from this thread: Extjs Grid Filter (http://www.extjs.com/forum/showthread.php?t=14503)

Forgot the ux section (this worked for me), only include the js file on your html/php page:
<script type="text/javascript" language="javascript" src="myfile.js"></script>

Regards

tuxz0r
2 Oct 2009, 6:29 AM
I've taken the existing ListFilter.js file and modified it slightly to try and create a Combobox filter (for lists that have larger values than a checkbox list could support. However, I'm running into problems with the code. Page loads fine, but when I select the filter menu on the column the combobox doesn't display and the filter menu won't even let me mark the checkbox to activate the filter. I don't get any errors via Firebug or otherwise.

Any ideas would be appreciated. Here's my ComboFilter.js code below. I've check with firebug, and the store I'm using to load the data works fine (Ajax call, remote store) and inspecting the object shows it correctly in the store. I'm really at a loss here.




Ext.grid.filter.ComboFilter = Ext.extend(Ext.grid.filter.Filter, {
displayField: 'text',
loadingText: 'Loading...',
loadOnShow: true,
value: '',
loaded: false,
phpMode: false,

init: function(){
this.menu.add('<span class="loading-indicator">' + this.loadingText + '</span>');

if(this.store && this.loadOnShow) {
this.menu.on('show', this.onMenuLoad, this);
} else if(this.options) {
var options = [];
for(var i=0, len=this.options.length; i<len; i++) {
var value = this.options[i];
switch(Ext.type(value)) {
case 'array':
options.push(value);
break;
case 'object':
options.push([value.id, value[this.displayField]]);
break;
case 'string':
options.push([value, value]);
break;
}
}

this.store = new Ext.data.Store({
reader: new Ext.data.ArrayReader({id: 0}, ['id', this.displayField])
});
this.options = options;
this.menu.on('show', this.onMenuLoad, this);
}

this.store.on('load', this.onLoad, this);
// this.bindShowAdapter();
},

/**
* Lists will initially show a 'loading' item while the data is retrieved from the store. In some cases the
* loaded data will result in a list that goes off the screen to the right (as placement calculations were done
* with the loading item). This adaptor will allow show to be called with no arguments to show with the previous
* arguments and thusly recalculate the width and potentially hang the menu from the left.
*
*/
bindShowAdapter: function() {
var oShow = this.menu.show;
var lastArgs = null;
this.menu.show = function() {
if(arguments.length == 0) {
oShow.apply(this, lastArgs);
} else {
lastArgs = arguments;
oShow.apply(this, arguments);
}
};
},

onMenuLoad: function() {
if(!this.loaded) {
if(this.options) {
this.store.loadData(this.options);
} else {
this.store.load();
}
}
},

onLoad: function(store, records) {
var visible = this.menu.isVisible();
this.menu.hide(false);

this.menu.removeAll();

// Add item for 'no selection' (id = 0)
var storeRecord = Ext.data.Record.create([ { name: 'id' }, { name: this.displayField } ]);
rec = new storeRecord({ id: 0, name: this.defaultItem }); // field name from this.displayField ???
store.add(rec);

var item = new Ext.form.ComboBox({
store: store,
displayField: this.displayField,
valueField: 'id',
emptyText: 'no filter',
valueNotFoundText: 'no filter',
disableKeyFilter: 'true',
editable: false,
triggerAction: 'all',
selectOnFocus: true,
typeAhead: true,
mode: 'local'
});
item.on('checkchange', this.checkChange, this); // Set event handler for change event

this.menu.add(item); // Add Combobox to Filter Menu

this.setActive(this.isActivatable());
this.loaded = true;

// if(visible) {
// this.menu.show(); //Adaptor will re-invoke with previous arguments
// }
},

checkChange: function(item, checked) {
var value = '';
value = this.menu.items[0].getValue();
this.value = value;

this.setActive(this.isActivatable());
this.fireEvent("update", this);
},

isActivatable: function() {
return this.value.length > 0;
},

setValue: function(value) {
var value = this.value = value;

if(this.loaded) {
this.menu.items[0].setValue(value);
}

this.fireEvent("update", this);
},

getValue: function() {
return this.value;
},

serialize: function() {
var args = {type: 'combo', value: this.value};
this.fireEvent('serialize', args, this);
return args;
},

validateRecord: function(record) {
return this.getValue().indexOf(record.get(this.dataIndex)) > -1;
}
});

Wohlrajh
6 Oct 2009, 1:05 AM
I need your help.
I have a problem to gridFilter, when i want to filter with character single quote, this character no display in textInput to browser Firefox.I test with other browser, the character display.

I have desactivate firefox plugins and i have always this problem.

Thanks.

jeanvincent
12 Oct 2009, 8:09 AM
Hi,

I am using the ListFilter with a datastore and what I can't figure out from the ListFilter.js is how to have default values? In other words, what do I put in my json so that some of the checkboxes are checked by default?

The code from ListFilter.js that I'm looking at is

checked: this.value.indexOf(records[i].id) > -1,

I even tried to hard code the default values in the listfilter object


{
type: 'list',
dataIndex: 'status',
store:statusStore,
labelField:'statusLabel',
phpMode: true,
value: [1, 2, 3]
}
But this doesn't work..indexof still returns -1.

What should I do?

Thanks!

dreas
27 Oct 2009, 12:26 AM
We had a problem with the Grid Filter Plugin and the option "enableHdMenu" set to "false" due to hmenu being undefined. This has been solved by slightly modifying the onRender code:


/** private **/
onRender: function(){
var hmenu;

if(this.showMenu) {
if(this.showMenu && this.grid.enableHdMenu !== false) {
hmenu = this.grid.getView().hmenu;

this.sep = hmenu.addSeparator();
this.menu = hmenu.add(new Ext.menu.CheckItem({
text: this.filtersText,
menu: new Ext.menu.Menu()
}));
this.menu.on('checkchange', this.onCheckChange, this);
this.menu.on('beforecheckchange', this.onBeforeCheck, this);

hmenu.on('beforeshow', this.onMenu, this);
}

this.grid.getView().on("refresh", this.onRefresh, this);
this.updateColumnHeadings(this.grid.getView());
},

alien3d
2 Nov 2009, 3:28 PM
var filters = new Ext.ux.grid.GridFilters({
// encode and local configuration options defined previously for easier reuse
encode : encode, // json encode the filter query
local : local, // defaults to false (remote filtering)
filters: [ { params : { table:'kambing' },
phpMode : true,
type : 'list',
dataIndex : 'todo_cde',

I try to put params at the filter and it doesn't work.The purpose was when on join table i need to specify exact tablename.I haved seen ux manual said addFilter but do no where should put.

Have been solved by changing the code in gridfilter.js


getFilterData : function () {
var filters = [], i, len;

this.filters.each(function (f) {
if (f.active) {
var d = [].concat(f.serialize());
for (i = 0, len = d.length; i < len; i++) {
filters.push({
field: f.dataIndex,
table:f.table, // this new
data: d[i]
});
}
}
});
return filters;
},
buildQuery : function (filters) {
var p = {}, i, f, root, dataPrefix, key, tmp,
len = filters.length;

if (!this.encode){
for (i = 0; i < len; i++) {
f = filters[i];
root = [this.paramPrefix, '[', i, ']'].join('');
p[root + '[field]'] = f.field;
p[root + '[table]'] = f.table; // this new
dataPrefix = root + '[data]';
for (key in f.data) {
p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];
}
}
} else {
tmp = [];
for (i = 0; i < len; i++) {
f = filters[i];
tmp.push(Ext.apply(
{},
{field: f.field},
f.data
));
}
// only build if there is active filter
if (tmp.length > 0){
p[this.paramPrefix] = Ext.util.JSON.encode(tmp);
}
}
return p;
}

kinchyle
10 Nov 2009, 8:46 PM
Is it possible to have the filter send a different field ?

filters: [{
type: 'list',
changeFieldname: 'owner',
dataIndex: 'owner_full_name',
options: [{id:'Mine',text:'Mine'}]
}


I'd like to have the filter send owner instead of owner_full_name.
I can't do it in the header because that id is used to sort and I need owner_full_name for the sort.

msubbareddy
11 Nov 2009, 1:49 PM
filters: [{
type: 'list',
labelField: 'owner', // Suppose to work but, won't work even dispalyField: or valueField: or id:
dataIndex: 'owner_full_name',
options: [{id:'Mine',text:'Mine'}]
}

Hence, the following can be used for now -


var store = new Ext.data.JsonStore({
root: 'r_records',
totalProperty: 'totalCount',
remoteSort: true,
fields: [
'src',

{ name :

'owner', mapping : 'owner_full_name'},


],

baseParams: {'parm1': 'xyz'},

url: 'report.pl'





});


...


filters: [{
type: 'list',
dataIndex: 'owner',
options: [{id:'Mine',text:'Mine'}]
}



Share me info, if you achieve betterway.


~ subba (http://sites.google.com/site/msubbareddy/)
http://sites.google.com/site/msubbareddy/

larowlan
27 Nov 2009, 2:18 AM
In this post http://www.extjs.com/forum/showthread.php?p=71404#post71404
there are some screenshots of filter menus containing a hierarchy of menu items and one containing a tree.
Are there any examples on how to achieve this functionality?
Do this functionality require a filter (extension of Ext.ux.grid.filters.Filter) that is not provided in the grid filter plugin?
If so is this filter available anywhere?
Thanks in advance.

maznaz
27 Nov 2009, 11:35 AM
when i build grid for first time method to access filters

Ext.getCmp('gridId').filters.getFilterData()

works fine

but when i reopen tab and re render grid, filters are set up ok but calling getFilterData() throw exception

Ext.getCmp("gridId").filters.getFilterData is not a function

ideas?

I have exactly this problem.

Even if I destroy() both the grid and the filters as I change the page content, when I recreate them the previous filter is shown and the above error is present.

Also, debugging the filter object in firebug shows a much cut down, simple object instead of the full Extjs object that's shown before I clear the page.

Illiarian
10 Dec 2009, 2:03 AM
Illiarian, trying to get the 'combo filter to work.
What is the purpose of the 'options' attribute?
Is that a store variable for the appropriate combobox?

Your help is appreciated. Thank you.

sorry for a belated reply.


options is if you want to pass in an array of objects:


var accounts = Ext.decode('[{"id":"0","name":"Jack"},{"id":"1","name":"223121 (Victoria)"},{"id":"2","name":"223122 (Victoria)"}]');
var currency = Ext.decode('[{"id":"1","code":"USD","name":"USD"},{"id":"2","code":"EUR","name":"EUR"},{"id":"3","code":"MDL","name":"MDL"},{"id":"5","code":"TST","name":"TST"}]');

var filters = new Ext.ux.grid.GridFilters({
filters:[
{type: 'string', dataIndex: 'from_to'},
{type: 'date', dataIndex: 'transaction_date'},
{
type: 'combo',
dataIndex: 'account',
options: accounts
}, {
type: 'combo',
dataIndex: 'currency_name',
options: currency
}
]});


If you wish to use a store, you can do that as well:



var filters = new Ext.ux.grid.GridFilters({
filters:[
{type: 'string', dataIndex: 'from_to'},
{type: 'date', dataIndex: 'transaction_date'},
{
type: 'combo',
dataIndex: 'account',
store: accountsStore
}, {
type: 'combo',
dataIndex: 'currency_name',
store: currencyStore
}
]});


where accountStore and currencyStore must fields "id" and "name". These two fields are used to populate the combo ("id" is used for the combo's "valueField" and "name" is used for "displayField").

scblue
28 Dec 2009, 1:40 AM
I'm trying to use this plugin with my project.
However, I keep getting this error:

this.getFilterClass(config.type) is not a constructor

and I can't seem to decode where the problem is.

Below are my include files:


<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="StartMenu.js"></script>
<script type="text/javascript" src="TaskBar.js"></script>
<script type="text/javascript" src="Desktop.js"></script>
<script type="text/javascript" src="App.js"></script>
<script type="text/javascript" src="Module.js"></script>
<script type="text/javascript" src="sample.js"></script>
<script type="text/javascript" src="states.js"></script>
<script type="text/javascript" src="ux/menu/EditableItem.js"></script>
<script type="text/javascript" src="ux/menu/RangeMenu.js"></script>
<script type="text/javascript" src="ux/grid/GridFilters.js"></script>
<script type="text/javascript" src="ux/grid/filter/Filter.js"></script>
<script type="text/javascript" src="ux/grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="ux/grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="ux/grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="ux/grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="ux/grid/filter/BooleanFilter.js"></script>
<script type="text/javascript" src="menus6.js"></script>


Anyone had the same problem before?

xrx215
8 Jan 2010, 6:46 AM
Hi iam using asp.net web service to do paging and sorting.I have added filter plugin. can i know how can i send the filter parameters(type, value, field) to server side .i.e. to web service.

rlieving
11 Jan 2010, 8:42 AM
Hi iam using asp.net web service to do paging and sorting.I have added filter plugin. can i know how can i send the filter parameters(type, value, field) to server side .i.e. to web service.

Pass the buildQuery function into the configuration for the grid filter as below:


buildQuery: function (f) {

if (f.length === 0) {
return;
}

[parsing code here - set store parameters]
}

I am uncomfortable using dynamic SQL (passing a raw where statement back), so I would parse the string on the server. That way, you can pass the whole thing back as one parameter AND you get a little extra security.

rlieving
11 Jan 2010, 8:50 AM
This filter is excellent. I find it is easy to implement with one exception.

I have a documentation question about the filter (or menu) events.

My grid automatically refreshes on a timer. This interferes with the filtering if the refresh happens while the user is typing in the filter box.

I would like to turn off the auto-refresh when the user activates a filter. And I would like to turn it back on when the filter is deactivated. I think I can easily navigate the object for those two conditions.

Do the controls on the filter raise events? Where can I read more about events? I looked through the code and don't quite understand it, but even if you point me to the actual Javascript, that should be enough for me.

untwist
1 Feb 2010, 1:20 AM
Help, why the second call of the filter does not work?


Ext.Grid_Sklad=Ext.extend(Ext.grid.GridPanel ,{

title:"zzzz",
store:store,
header:false,
headerAsText:true,
enableDragDrop : true,
region:"center",
columnLines:true,
stripeRows: true,
loadMask: {msg: 'Загрузка...'},
stateful: true,
columns:[
knopka,
{header:"На складе", dataIndex:"Total"},
{header:"Артикул", dataIndex:"ItemID", filter:{type: 'string'}},
{header:"Название", dataIndex:"Name"}
],
plugins:[new Ext.ux.grid.GridFilters({
encode: true,
autoReload: false,
local: true,
filters: [{type: 'string',dataIndex: 'ItemID', store: store, labelfield: 'ItemID'}]
})
],
initComponent: function(){ Ext.Grid_Sklad.superclass.initComponent.call(this); }
});




var gridasdf = new Ext.Grid_Sklad({});

var win = new Ext.Window({
title: 'Grid Filters Example',
height: 400,
width: 700,
x:100,
y:100,
layout: 'fit',
items: gridasdf}).show();




var gridasdfs = new Ext.Grid_Sklad({});

var win = new Ext.Window({
title: 'Grid Filters Example',
height: 400,
width: 700,
x:300,
y:300,
layout: 'fit',
items: gridasdfs}).show();

cvasilak
1 Mar 2010, 2:23 AM
Hi there,

please excuse me I am a newbie to extjs. My apologies if this have been answered before.

I have a form with a submit and export to XLS button. On the server side I use PHP. I have implemented most of the functionality eg. upon submit the grid is loaded with the data. I also have implemented paging and server-side filtering and sort

I am trying to implement the export to xls functionality now. My question is what is the proper way to get the filter and sort params from the grid((if they have been applied). The export button now submits the form data (which is one part of my sql query). I want to also extract the sort and filter params from the grid and send them to server too.

Thanks for any answer.

Regards

The Transporter
1 Mar 2010, 3:30 AM
Hi there,

please excuse me I am a newbie to extjs. My apologies if this have been answered before.

I have a form with a submit and export to XLS button. On the server side I use PHP. I have implemented most of the functionality eg. upon submit the grid is loaded with the data. I also have implemented paging and server-side filtering and sort

I am trying to implement the export to xls functionality now. My question is what is the proper way to get the filter and sort params from the grid((if they have been applied). The export button now submits the form data (which is one part of my sql query). I want to also extract the sort and filter params from the grid and send them to server too.

Thanks for any answer.

Regards

This is what I did:



Ext.MessageBox.wait('Loading ...');
Ext.Ajax.request({
url: '_ajax/ads.php',
method: 'POST',
loadMask: true,
params: {
a: "e",
filter: Ext.encode(filters.getFilterData()),
type: 'csv'
},
success: function(xhr,params) {
Ext.MessageBox.updateProgress(1);
Ext.MessageBox.hide();
//alert('Success!\n'+xhr.responseText);
},
failfure: function(xhr,params) {
Ext.MessageBox.updateProgress(1);
Ext.MessageBox.hide();
alert('Failure!\n'+xhr.responseText);
}
});

jmilton59
15 Mar 2010, 10:33 AM
Has anyone attempted to use this filter plugin with Coldfusion 8? If so, would you be willing to share an example. I have been attempting to make the filter work with a cfgrid but I am not having much luck.

Thanks
Joe

The Transporter
15 Mar 2010, 10:35 AM
Has anyone attempted to use this filter plugin with Coldfusion 8? If so, would you be willing to share an example. I have been attempting to make the filter work with a cfgrid but I am not having much luck.

Thanks
Joe

I don't know colfusion, but for what I know of it, it's a server language, so, it shouldn't make any problem with ExtJS which is a client side language, and the grid plugin should work.
Of course, there are script to write on the server side to get it working properly!

jmilton59
15 Mar 2010, 11:31 AM
I don't know colfusion, but for what I know of it, it's a server language, so, it shouldn't make any problem with ExtJS which is a client side language, and the grid plugin should work.
Of course, there are script to write on the server side to get it working properly!

Coldfusion uses the EXT JS within it's <cfgrid> tag. I have figured out how to add a datepicker for example, by using setEditor to define the editor for the column index.

Is there a set method for the filter? I tried addFilter like this:


grid = ColdFusion.Grid.getGridObject("ProjectGrid");
cm = grid.getColumnModel();
stIndex1 = cm.findColumnIndex("CLOSEOUT_COMPLETE");
var filter1 = new Ext.ux.grid.GridFilters({filters:[
{type: 'string', dataIndex: stIndex1}
]});
cm.addFilter(filter1);

maureend
17 Mar 2010, 4:55 AM
Hey guys -

I'm trying to implement this plugin inside of my company's intranet and unfortunately we don't have PHP. We have Ext 2.3 and I need a grid filter.

Is there a way to get this plugin to work? Is there an alternative for non-PHP environments?

I've replicated the example exactly except my data is in a json file. The sorting, grouping features work great, it just won't filter the data.

Sorry if this question has been answered.

pmdarrow
1 Apr 2010, 12:04 PM
Hi all. Is there any way filter a column that's rendered using multiple data columns? For instance, I have a grid column with the header "Full Address" that uses a custom renderer ("addressRender") to combine Street, City, State/Province, Zip/Postal Code, and Country for each row. The column definition looks like this:


{ header: 'Full Address', dataIndex: 'Street', sortable: true, width: 168, renderer: this.addressRenderer }Notice that although the dataIndex is only 'Street', the render appends the data from the other columns using record.data.City, record.data.Country, etc. This poses a problem for the filtering plugin though because filters are defined by dataIndex and not column header.

The following filter definition will add filtering to the "Full Address" column but will only build queries against the Street column, not all of the other columns:

new Ext.ux.grid.GridFilters({
filters: [
{ dataIndex: 'Street', type: 'string' }
],
})
},Can anyone suggest a way to modify the grid filters plugin to work in this case?

pbuser
4 Apr 2010, 11:27 PM
This is a great work and I'm trying to find out if I can use it for my CD project.
In order to use it locally (adding it to client side only), I modified it to handle statice data inside js code but no luck.

Could anyone help me with the code below?

Thanks in advance!

=================================

script type="text/javascript">
Ext.onReady(function(){
Ext.ux.menu.RangeMenu.prototype.icons = {
gt: 'img/greater_then.png',
lt: 'img/less_then.png',
eq: 'img/equals.png'
};
Ext.ux.grid.filter.StringFilter.prototype.icon = 'img/find.png';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

//original codes

var ds = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url:'action.php' (http://www.extjs.com/forum/'action.php')
}),

//new codes

var myData = [
[879,29,24,'9/1','true',900]
];

var ds = new Ext.data.GroupingStore({
Store: new Ext.data.Store({
data:myData
}),

reader: new Ext.data.JsonReader({
id: 'id',
totalProperty: 'data.total',
root: 'data.results'
}, Ext.data.Record.create([
{name:'id'},
{name:'name'},
{name:'price'},
{name:'dateAdded'},
{name:'visible'},
{name:'size'}])),

groupField: 'size',
sortInfo: {field: 'name', direction: 'ASC'},
remoteSort: true
});
var filters = new Ext.ux.grid.GridFilters({filters:[
{type: 'numeric', dataIndex: 'id'},
{type: 'string', dataIndex: 'name'},
{type: 'numeric', dataIndex: 'price'},
{type: 'date', dataIndex: 'dateAdded'},
{
type: 'list',
dataIndex: 'size',
options: ['extra small', 'small', 'medium', 'large', 'extra large'],
phpMode: true
},
{type: 'boolean', dataIndex: 'visible'}
]});

var cm = new Ext.grid.ColumnModel([{
dataIndex: 'id',
header: 'Id'
}, {
dataIndex: 'name',
header: 'Name'
}, {
dataIndex: 'price',
header: 'Price'
}, {
dataIndex: 'dateAdded',
header: 'Date Added'
}, {
dataIndex: 'size',
header: 'Size'
}, {
dataIndex: 'visible',
header: 'Visible'
}]);
cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({
id: 'example',
ds: ds,
cm: cm,
enableColLock: false,
loadMask: true,
view: new Ext.grid.GroupingView(),
plugins: filters,
height:400,
width:700,

el: 'grid-example',

bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 15,
plugins: filters
})
});
grid.render();

ds.load({params:{start: 0, limit: 15}});
});
</script>

<style type="text/css" title="currentStyle" media="screen">
@import "ext/resources/css/ext-all.css";
.x-grid3-hd-row td.ux-filtered-column {
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<h1>ExtJS Filter Grid Example</h1>
<div id="grid-example" style="margin: 10px;"></div>
<a href="source.zip">Source</a>
</body>
</html>

mikeasi
7 Apr 2010, 8:41 AM
Forgive me for not reading all 85 pages of this thread, but is there a way to quickly grab the current filters and/or load them?

I'm looking to save a user's preferences (aka last filter setting) and load them back up the next time they login, this way a user who finds themselves constantly setting the same filter upon login won't have to do this any more. Thanks in advance.

hendricd
7 Apr 2010, 8:46 AM
@mikeasi --
the Filter class's getState method returns a nice hash of currently active filters. It's also used in conjunction with the built-in state mgt.

mikeasi
7 Apr 2010, 8:51 AM
Thanks, hendricd! That worked like a charm.

Reimius
21 Apr 2010, 10:46 AM
Thanks, hendricd! That worked like a charm.

Can you provide an example of what you did, I need exactly the same thing as what you did, but I am confused because the Filter class does not appear to have a getState() method.

If anyone else has been able to do this, please give me an example of how, thanks

mikeasi
23 Apr 2010, 8:52 AM
Is there a way to specify a state when you first specify the filters? I'm looking to load up the filter state when I call



this.plugins = new Ext.ux.grid.GridFilters({
filters:[{....}]
});


I'm loading a state when I initialize a grid if the user has a preference specified, but right now I'm applying the state on the render event, I'd rather have it specified from the start.

mikeasi
23 Apr 2010, 8:57 AM
Can you provide an example of what you did, I need exactly the same thing as what you did, but I am confused because the Filter class does not appear to have a getState() method.

If anyone else has been able to do this, please give me an example of how, thanks




var state = {}
this.filters.saveState(this,state);


that will populate the state variable with a JSON representation of your current filter settings



this.filters.applyState(this,state);
this.filters.reload();


that would load that JSON into the filters and reload

Feel free to correct/revise my example, experts.

fabsen2102
3 May 2010, 12:00 PM
Hi!
I didnt read all the threads.. sorry!
I have implemented all the scripts and the filter is shown.. After select a filter the relaod is fired, but nothing happens.
I debugged the code and the filter is set.. But it doesn't work.. I've got no idea why..

Here my code:



Ext.onReady(function() {

setTicketSearchUrl('false', '');
// create the Data Store
storeExtJS = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({url: 'index.php?modus=AJAX&function=TicketSearch' + FilterSearchQuery}),

reader: new Ext.data.XmlReader({
record: 'row',
id: 'fprojekt_ID'
}, [
{name: 'tbprojekt.fprojektTicketNr', mapping: 'fprojektTicketNr'},
{name: 'a.faliasUserName', mapping: 'faliasUserName'},
{name: 'bearbeiterALIAS', mapping: 'bearbeiterALIAS'},
{name: 'tb_company.fcompanyName', mapping: 'fcompanyName'},
{name: 'tbprojekt.fprojektName', mapping: 'fprojektName'},
{name: 'tbprojekt.fprojektDeadline', mapping: 'fprojektDeadline'},
{name: 'Aufwande', mapping: 'stdSumme'},
{name: 'tbprojekt.fprojektPrio', mapping: 'fprojektPrio'},
{name: 'tbprojekt.fprojektTicketStatus', mapping: 'fprojektTicketStatus'}
]),
remoteSort: false,
sortInfo:{field: 'Kunde', direction: "ASC"}
}); // ENDE create the Data Store

var filters = new Ext.ux.grid.GridFilters({filters:[
{type: 'numeric', dataIndex: 'tbprojekt.fprojektPrio'}
]});

// create the grid
var grid = new Ext.grid.GridPanel({
store: storeExtJS,
autoSizeColumns: true,
monitorWindowResize: true,
plugins: filters,
columns: [new Ext.grid.RowNumberer({width: 30}),
{id:'Nr', header: "Nr.", width: 45, dataIndex: 'tbprojekt.fprojektTicketNr', sortable: true},
{header: "Verant.", width: 50, dataIndex: 'a.faliasUserName', sortable: true},
{header: "Bearb.", width: 50, dataIndex: 'bearbeiterALIAS', sortable: true},
{header: "Kunde", dataIndex: 'tb_company.fcompanyName', sortable: true},
{header: "Beschreibung", dataIndex: 'tbprojekt.fprojektName', sortable: true},
{header: "Deadline", width: 70, align: 'center', dataIndex: 'tbprojekt.fprojektDeadline', sortable: false},
{header: "Aufwände", width: 72, align: 'right', dataIndex: 'Aufwande', sortable: false},
{header: "Prio", width: 35, align: 'center', dataIndex: 'tbprojekt.fprojektPrio', sortable: true, type: 'int'},
{header: "Status", width: 45, align: 'center', dataIndex: 'tbprojekt.fprojektTicketStatus', sortable: true, renderer: renderIcon}
],

view: new Ext.grid.GroupingView({
autoSizeColumns: true,
monitorWindowResize: true,
autoExpandColumn: '5',
autoExpandMax: 2000,
enableNoGroups:true
}),

frame:false,
autoExpandColumn: '5',
autoExpandMax: 2000,
renderTo:'GridDivTickets',
loadMask: true,
width:'100%',
height:230,

collapsible: true,
animCollapse: false,
title: 'Tickets'
}); //ENDE create the grid


storeExtJS.load(); //Daten laden!!!
Has somebody an idea?

Thanks!!!

alexpotemkin
4 May 2010, 4:45 AM
problem with icons in filter menu

2030920310

how fix?
css loaded, images loaded, but on rendering have this problem

ebinfo
5 May 2010, 7:41 AM
i am having a little issue with the filters, however i am not sure if this is possible.

my client has asked that i provide him with something web-based but as close to excel spreadsheet as possible.

the filters are working tremendously great for list types, however he does not like the fact that he has to type the filter he wants to use when dealing with a string filter. he would like to have a filter type where he can just tick the values he wants in there to apply to the filter, exactly like excel does.

does anybody have ever came up with this scenario?

ebinfo
6 May 2010, 7:18 AM
in case some of you guys want to have the same effect.

i used an ajax call as such:


function getProjectNames() {
xmlHttp.open('GET', '/ajax_commands/get_project_names.php', false);
xmlHttp.send(null);

return xmlHttp.responseText;
}

this gives me the list of project names (unique names) of the database for the project name field.

from this list, i do this



var aProjectNames = getProjectNames().split(',');

var aProjectNamesFilter = [];

for (i = 0; i < aProjectNames.length; i++) {
aProjectNamesFilter.push(aProjectNames[i]);
}



that gives me an object name called aProjectNamesFilter

i then use this inside my code for the project name filter:



{
type: 'list',
dataIndex: 'project_name',
options: aProjectNamesFilter
},


this works like a charm for me.

geo_cris_ro
10 May 2010, 6:51 AM
Great plug-in!!! It helped me a lot!!!

For a list filter, i want to use jsonStore. so, I use this store:

store : new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: REQUEST_PATH,
method:"POST",
success:function(oReq){ }
}),
root: 'data',
fields:['id', 'text'],
reader: new Ext.data.JsonReader({idIndex: 0, root: "data" }['id', 'text'])
})example of json response:

"data":[{"id": 1000, "text":"F1"},
{"id": 1001, "text":"F1"},
{"id": 1002, "text":"F3"}
]The menu list fills ok, with the correct data, but when I want to filter, the filter[1][data][value] sent to the server, is wrong(a number.) Can you please give me a clue on what could be wrong with this store?
Another question would be if I can send the id to the server, and show the text in the list menu.

Thank you!

warmi01
12 May 2010, 7:22 AM
Hi,

Sorry if this info is available elsewhere or if I am posting in the wrong place, but I am a newbie to the forum (1st post) and am interested in this plug-in.

Questions:

1. We are currently using Ext GWT 2.1.1, so I assume this is the compatible plug-in version we should use (i.e. not 3.x)? Is there a direct interface in GXT or would that need to be written?
2. We have a commercial GXT license. What licensing applies to UX plug-ins? Are they covered under commercial license or separate? etc.
3. If there are different licenses in effect (i.e. commercial license for core Ext; other for UX), does this change at all in version 3.x (I noticed that this plug-in is included in core Ext distribution)?
4. If no direct GXT interface to plug-in, does this change in version 3.x?

zozzi
7 Jun 2010, 11:39 AM
problem with icons in filter menu

2030920310

how fix?
css loaded, images loaded, but on rendering have this problem

my quick fix based from other posts ...

editableitem.js

onRender: function(container){
var s = container.createChild({
cls: this.itemCls,
html: '' // ADD THIS EMPTY STRING
//html: '<img src="' + (this.icon||Ext.BLANK_IMAGE_URL)+ '" class="x-menu-item-icon'+(this.iconCls?' '+this.iconCls:'')+'" style="margin: 3px 7px 2px 2px;" />'
});;then in css I changed following:


/**
* RangeMenu.js Styles
**/
.ux-rangemenu-gt {
background-image: url(greater_then.png);
position: relative;
}

.ux-rangemenu-lt {
background-image: url(less_then.png);
position: relative;
}

.ux-rangemenu-eq {
background-image: url(equals.png);
position: relative;
}

img.ux-gridfilter-text-icon {
top: 5px;
left: 5px;
}

img.ux-rangemenu-gt,
img.ux-rangemenu-lt,
img.ux-rangemenu-eq {
position: relative;
top: 2px;
left: -23px;
}

fangzhouxing
8 Jun 2010, 5:59 AM
my quick fix based from other posts ...

editableitem.js

onRender: function(container){
var s = container.createChild({
cls: this.itemCls,
html: '' // ADD THIS EMPTY STRING
//html: '<img src="' + (this.icon||Ext.BLANK_IMAGE_URL)+ '" class="x-menu-item-icon'+(this.iconCls?' '+this.iconCls:'')+'" style="margin: 3px 7px 2px 2px;" />'
});;then in css I changed following:


/**
* RangeMenu.js Styles
**/
.ux-rangemenu-gt {
background-image: url(greater_then.png);
position: relative;
}

.ux-rangemenu-lt {
background-image: url(less_then.png);
position: relative;
}

.ux-rangemenu-eq {
background-image: url(equals.png);
position: relative;
}

img.ux-gridfilter-text-icon {
top: 5px;
left: 5px;
}

img.ux-rangemenu-gt,
img.ux-rangemenu-lt,
img.ux-rangemenu-eq {
position: relative;
top: 2px;
left: -23px;
}


I use ExtJS 2.3.0, and I add following patch to css that solve the same problem(not need to change editableitem.js )


/* patch */
img.ux-gridfilter-text-icon,
img.ux-rangemenu-gt,
img.ux-rangemenu-lt,
img.ux-rangemenu-eq {
top: 0;
left: 0;
position: relative;
margin-right:10px;
}

li.x-menu-list-item div {
display: inline;
}

li.x-menu-list-item-indent {
padding:0px;
}

vrakesh_20
22 Jun 2010, 1:44 AM
Hi dude,
I'm also looking for the same file JSonResponseReader.js .
In case if you have that file please do share it with me.
I need that code very badly.

Thanks

mikeasi
2 Jul 2010, 9:38 AM
How can I setup the grid filter to display in a column header of a field that doesn't necessarily match the dataindex value? It seems to match up to whatever the dataindex is set to, am I not seeing an option to apply it to a custom column that isn't matched to the dataindex value?

Dmoney
7 Jul 2010, 7:29 AM
The filtering works great for me however, when I filter for something and there are no matches the grid does not change it displays the same records that were there already. I expect it to clear the store and show nothing.

how do I clear the store if there are no matches?

Reimius
7 Jul 2010, 12:07 PM
Hello guys,

I've modified this code to work with treegrids for those who are interested, see:

http://www.sencha.com/forum/showthread.php?103549-Treegrid-GridFilters-%28in-column-headers-like-GridFilters-example%29

abed_216
8 Jul 2010, 1:16 AM
Hi fangzhouxing

Try this


/**
* RangeMenu.js Styles
**/
.x-menu-list-item {
position:relative;
}
.ux-rangemenu-gt {
background-image: url(greater_then.png);
}

.ux-rangemenu-lt {
background-image: url(less_then.png);
}

.ux-rangemenu-eq {
background-image: url(equals.png);

}
img.ux-gridfilter-text-icon {
top: 5px;
left: 5px;
}

img.ux-rangemenu-gt,
img.ux-rangemenu-lt,
img.ux-rangemenu-eq {
top: 5px;
left: 5px;
}

thiner
15 Jul 2010, 3:34 AM
I'm trying to use this plugin with my project.
However, I keep getting this error:

this.getFilterClass(config.type) is not a constructor

and I can't seem to decode where the problem is.

Below are my include files:

Anyone had the same problem before?

Hi scblue,
I met the same problem, did you solved it?
If so, can you tell me how to solve it?
Thank you.

kellyjohn.carney
20 Jul 2010, 2:54 PM
Grid Filter + Livegrid - 30 Jan 2008


Has anyone used Livegrid + the Grid Filter plugin? I'm trying this out and the grid and filters work as expected except when I apply a filter and then scroll the grid -- once the grid makes a request for new rows, it doesn't pass the filter to my server-side function so it ends up pulling new rows from an unfiltered dataset...

Any ideas on how to pass the filters through livegrid and back to the server?

thx

Matt

Hmm, it's been years since the question was asked, but I can offer this solution.

-kjc



[kelly@dev003 ux]$ svn diff gridfilters/GridFilters.js -r14024:14364
Index: gridfilters/GridFilters.js
===================================================================
--- gridfilters/GridFilters.js (revision 14024)
+++ gridfilters/GridFilters.js (revision 14364)
@@ -453,7 +453,22 @@
onBeforeLoad : function (store, options) {
options.params = options.params || {};
this.cleanParams(options.params);
+
+ var params = this.buildQuery(this.getInactiveFilterData());
+
+ Ext.iterate(params, function(key, value)
+ {
+ delete(store.baseParams[key]);
+ });
+
+
var params = this.buildQuery(this.getFilterData());
+
+ Ext.iterate(params, function(key, value)
+ {
+ store.baseParams[key] = value;
+ });
+
Ext.apply(options.params, params);
},

@@ -625,6 +640,27 @@
},

/**
+ * Returns an Array of the currently inactive filters.
+ * @return {Array} filters Array of the currently active filters.
+ */
+ getInactiveFilterData : function () {
+ var filters = [], i, len;
+
+ this.filters.each(function (f) {
+ if (!f.active) {
+ var d = [].concat(f.serialize());
+ for (i = 0, len = d.length; i < len; i++) {
+ filters.push({
+ field: f.dataIndex,
+ data: d[i]
+ });
+ }
+ }
+ });
+ return filters;
+ },
+
+ /**
* Function to take the active filters data and build it into a query.
* The format of the query depends on the <code>{@link #encode}</code>
* configuration:

DBorrega
21 Jul 2010, 7:37 AM
Hi !

I've 1 doubt.

Can I add in a "string filter" type, the options "start with..." and "end with"? Default only appears a "contains" option.

If it's possible... How I can implement it?

Thanks to all !!

Skelv
29 Jul 2010, 2:06 AM
First of all, hi everyone! I've been using ExtJS for a couple of weeks and I really love it:)

But (there's always a "but"), I haven't been able to solve a problem just by reading the api documentation, so I beg for your help: I'm trying to initialize a DateFilter so that when the grid loads the data is already filtered, in a similar way as the "value" config option works for list filters. Is there any way to do this with date filters?

Thanks in advance for your help!

Reimius
29 Jul 2010, 10:36 AM
First of all, hi everyone! I've been using ExtJS for a couple of weeks and I really love it:)

But (there's always a "but"), I haven't been able to solve a problem just by reading the api documentation, so I beg for your help: I'm trying to initialize a DateFilter so that when the grid loads the data is already filtered, in a similar way as the "value" config option works for list filters. Is there any way to do this with date filters?

Thanks in advance for your help!

Here's an example of how to do it in the config:

on a certain date:

{
type: 'date',
dataIndex: 'est_completion_date',
value: {on: Date.parseDate('07/12/2010','m/d/Y')}
}

before:

{
type: 'date',
dataIndex: 'est_completion_date',
value: {before: Date.parseDate('07/21/2010','m/d/Y')}
}

after:

{
type: 'date',
dataIndex: 'est_completion_date',
value: {after: Date.parseDate('07/21/2010','m/d/Y')}
}

Skelv
30 Jul 2010, 4:28 AM
Here's an example of how to do it in the config:
[...]

So, it was with a value option, too! The problem was I didn't put a JSON with the format "on/before/after: date", I just put "value: date" as the config option.

Thanks a lot :)

msinn
27 Oct 2010, 1:05 AM
Hi, I have a question: how can I style the filterd column, which css classes we need for that?

Another current thread to GridFilters ist this: http://www.sencha.com/forum/showthread.php?72024-GridFilter-Extension-for-3.x or this here: http://www.sencha.com/forum/showthread.php?72024-GridFilter-Extension-for-3.x

I've tried all hints from this thread, but without solving the problem
Maybre You know that, please help.

msinn
28 Oct 2010, 1:31 AM
CSS Style for the filtered column

The answer you find here: http://www.sencha.com/forum/showthread.php?113861-SOLVED-How-to-change-the-css-style-for-a-specific-grid-column&p=531277#post531277

israel.galan
10 Dec 2010, 2:25 AM
Hello,
I managed to get the list filter appearing with the right options. However, when I tick the boxes I get the 'Loading data' message, but the table is not filtered.
I tried to debug the code, but I could not figure out what is going on when I tick a box.

The question is, what is being filtered? is it the loaded store that gets filtered or is the store being reloaded? And if the store is reloaded, how do I pass the arguments so that my php script returns the filtered data?

msinn
10 Dec 2010, 2:33 AM
Hello,
I managed to get the list filter appearing with the right options. However, when I tick the boxes I get the 'Loading data' message, but the table is not filtered.
I tried to debug the code, but I could not figure out what is going on when I tick a box.

The question is, what is being filtered? is it the loaded store that gets filtered or is the store being reloaded? And if the store is reloaded, how do I pass the arguments so that my php script returns the filtered data?

http://www.sencha.com/forum/showthread.php?76185-GridFilters-enhanced-filtering-for-grids&p=543576#post543576
http://www.sencha.com/forum/showthread.php?76185-GridFilters-enhanced-filtering-for-grids&p=544919#post544919

israel.galan
10 Dec 2010, 2:46 AM
http://www.sencha.com/forum/showthread.php?76185-GridFilters-enhanced-filtering-for-grids&p=543576#post543576
http://www.sencha.com/forum/showthread.php?76185-GridFilters-enhanced-filtering-for-grids&p=544919#post544919
I am not sure I understand how these two links apply to my question.
Anyway, I have observed that everytime I tick a box in the list, my store is reloaded with a POST request.
I can easily modify my PHP code to handle this, but my tables are usually very small and I find it is a waste of resources.
Is there any configuration option in the filter (or the Grid store) to force the filter to be applied locally?

msinn
10 Dec 2010, 2:51 AM
I am not sure I understand how these two links apply to my question.
Anyway, I have observed that everytime I tick a box in the list, my store is reloaded with a POST request.
I can easily modify my PHP code to handle this, but my tables are usually very small and I find it is a waste of resources.
Is there any configuration option in the filter (or the Grid store) to force the filter to be applied locally?

local: true

israel.galan
13 Dec 2010, 12:38 AM
local: true
Thanks, that worked like a breeze...

israel.galan
13 Dec 2010, 12:39 AM
Hello,
Two questions:
-How do I add items to a list filter options and then refresh the view to ensure the new items are included?
-How do I dynamically check/uncheck options in the list?
Thanks

israel.galan
19 Dec 2010, 10:40 PM
Hello,
Two questions:
-How do I add items to a list filter options and then refresh the view to ensure the new items are included?
-How do I dynamically check/uncheck options in the list?
Thanks

Hello, anyone has an answer to any of the above?

msinn
19 Dec 2010, 11:08 PM
Hello, anyone has an answer to any of the above?

The plugin doesn't support those features of the box, so you have to manually program them
- add a new column with the new list option, so the plugin will react on the reconfigure event of the grid
- take a look to the ListMenu of gridfilters

API for the gridfilters: http://dev.sencha.com/deploy/dev/examples/docs/?class=Ext.ux.grid.GridFilters

spiderweb
24 Dec 2010, 2:08 AM
Hello,

I've created data rate filter which is a slight modification of the number filter, which looks something like this:

23966

I have a problem with the units combobox, when I select a value from the list, the filter menu (I assume) loses focus and disappears (unit value is properly applied though). How do I prevent disappearing of the filter when I select a value from the combobox?

wm003
30 Dec 2010, 8:48 AM
How do I prevent disappearing of the filter when I select a value from the combobox?

I had something similiar with a combobox Menu Entry and i solved it this way:


combobox.editor.on("render",function (c){
//prevent the menu from disappearing when combobox is selected
c.list.on('mousedown', function(e){
Ext.lib.Event.stopPropagation(e);
});
});

EDFGRENOBLE
4 Jan 2011, 2:30 AM
Hi,

Is there somewhere a documentation, because I need informations for list

msinn
4 Jan 2011, 2:49 AM
Hi,

Is there somewhere a documentation, because I need informations for list

Hi,

you'll find info in this (http://www.sencha.com/forum/showthread.php?14503-Grid-Filter-%28Plugin%29)thread and in this (http://www.sencha.com/forum/showthread.php?76185-GridFilters-enhanced-filtering-for-grids)one. Documentation is here (http://dev.sencha.com/deploy/dev/examples/docs/?class=Ext.ux.grid.GridFilters) and for more specific info concerning the list you could check also the Ext JS source code in examples/ux/gridfilters/GridFilters.js and in examples/ux/gridfilters/filter/ListFilter.js

EDFGRENOBLE
4 Jan 2011, 3:02 AM
Ok Thx

I would like to know I its possible for list Option, to have options like on form.combo : remote or local

msinn
4 Jan 2011, 3:12 AM
Ok Thx

I would like to know I its possible for list Option, to have options like on form.combo : remote or local

yes this is possible, take a look to this post (http://www.sencha.com/forum/showthread.php?76185-GridFilters-enhanced-filtering-for-grids&p=543576#post543576)

spiderweb
4 Jan 2011, 6:43 AM
At first I thought to implement something similar, but I knew that I've seen this work somewhere with the original code, Animal helped me a little in this post http://www.sencha.com/forum/showthread.php?119642-Loss-of-focus, you just need to set the listClass:'x-menu', I changed it earlier and forgot, now I just used listClass: 'x-menu some-other-css-class', and it worked.

Ebpo
7 Jan 2011, 7:42 AM
Hi!

I have a problem, not sure if this is where I'm supposed to post.
In the menu to filter numeric value (with gt, lt and eq), icons (=, >, <) are overlapping eachother and doubled.

Does anybody know what's the problem?
Thanks!

msinn
7 Jan 2011, 11:52 AM
Hi!

I have a problem, not sure if this is where I'm supposed to post.
In the menu to filter numeric value (with gt, lt and eq), icons (=, >, <) are overlapping eachother and doubled.

Does anybody know what's the problem?
Thanks!

Which Ext JS version? Did you include the css files from examples/ux/gridfilters/css/GridFilters.css and examples/ux/gridfilters/css/RangeMenu.css ? Did you set Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif' ?

manilodisan
8 Jan 2011, 9:49 PM
It may be already answered but I stopped searching somewhere at page 50 of this thread.

I have a grid which opens inside a tabPanel. If I filter the grid, close the tab and reopen it, the grid loads with the filter set previous to closing that tab.

Checked the destroy function of grid filter and it fires when the tab is closed so how can I destroy the filter making it completely reset on tab closure. Is there another method to do a complete reset? Thank you in advance.

pamelablalock
13 Jan 2011, 3:44 PM
Early in this thread, these screenshots were posted in response to having the filter on the column header menu, vs something like the HeaderForm plugin. However I have not been able to successfully configure a cascading filter menu. I'd like to have a filter with checkboxes for common items and "Other" that would cascade out to a text filter, where the user could type something "uncommon". Seeing the screenshots of the cascading filter gave me hope - especially the one that says "Contains Text", since I suspect it does exactly what I need, but I can't find any examples. Any help is greatly appreciated.


Screenshots:
Screenshot 1
http://ccinct.com/lab/screenshots/tree.png

Screenshot 2
http://ccinct.com/lab/screenshots/category_menu.png

[/QUOTE]

softwareengineer
24 Jan 2011, 2:21 AM
By default the field is 'filter', with out the 's'. But that is configurable with the 'paramPrefix' confg option. For example:


plugins: new Ext.ux.grid.GridFilters({paramPrefix: 'omgBearIsDriving'});
Additionally, the filter param will be expressed as an array of objects for example:


filter[0][data][type]=string
filter[0][data][value]=Geek
filter[0][field]=name
filter[1][data][type]=list
filter[1][data][value]=medium,large,extra large
filter[1][field]=size
If you wish to change how the data is structured and sent to the server you can either extend GridFilters and overload the 'buildQuery' function or pass a new function as config option:



plugins: new Ext.ux.grid.GridFilters({
buildQuery: function(filters){
var p = {};
for(var i=0, len=filters.length; i<len; i++){
// Custom filter serialization
}

return p;
}
});



Hi ambience,

I would appreciate if you can help to get the grid filter selected check box values to server side.
I am getting all parameter from request.param but only filter param I am not able to get
Please let me know how do I get those param.filter values in java.

Thank you,

Reimius
24 Jan 2011, 6:28 AM
Hi softwareengineer,

This may help you for what you want, it is two custom functions I developed for saving a grid state to a database because some of the other ones I tried weren't working for IE6, maybe you can dig through and find what you need:



function saveColumnData(grid, gridName, store)
{
var cm = grid.getColumnModel();

var xmlHttp = getXmlHttp();
var params = "context=SAVE_COLUMN_STATE";
params += "&extjs_grid=" + encodeURIComponent(gridName);

for(var i = 0; i < cm.config.length; i++)
{
params += "&column_" + i + "_data_index=" + encodeURIComponent(cm.config[i].dataIndex);
params += "&column_" + i + "_width=" + encodeURIComponent(cm.config[i].width);
if(cm.config[i].hidden)
params += "&column_" + i + "_hidden=" + encodeURIComponent("true");
else
params += "&column_" + i + "_hidden=" + encodeURIComponent("false");
var theFilter = grid.plugins[0].getFilter(cm.config[i].dataIndex);
if(theFilter.active)
params += "&column_" + i + "_filter=" + encodeURIComponent(decodeFilterToString(theFilter));
else
params += "&column_" + i + "_filter=";
}

params += "&column_count=" + encodeURIComponent(cm.config.length);
var sortState = store.getSortState();
if(sortState)
{
params += "&column_sort_data_index=" + encodeURIComponent(sortState.field);
params += "&column_sort_direction=" + encodeURIComponent(sortState.direction);
}

var xmlHttp = getXmlHttp();
var url = "extjs_utilities_save.jsp";
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", params.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(params);
}

function decodeFilterToString(someFilter)
{
var returnData = "";
var type = someFilter.type;
var value = someFilter.getValue();
if(type == "numeric")
{
var insertComma = false;
returnData += "{"
if(value.lt != null)
{
returnData += "lt: " + value.lt;
insertComma = true;
}
if(value.gt != null)
{
if(insertComma)
returnData += ",";
returnData += "gt: " + value.gt;
insertComma = true;
}
if(value.eq != null)
{
if(insertComma)
returnData += ",";
returnData += "eq: " + value.eq;
}
returnData += "}";
}
else if(type == "list")
{
var first = true;
returnData = "[";
for(var i = 0; i < value.length; i++)
{
if(!first)
returnData += ",";
returnData += "\"" + value[i].replace(/"/g,"\\\"") + "\"";
first = false;
}
returnData += "]";
}
else if(type == "date")
{
var insertComma = false;
returnData += "{"
if(value.before != null)
{
returnData += "before: Date.parseDate('" + value.before.format('m/d/Y') + "','m/d/Y')";
insertComma = true;
}
if(value.after != null)
{
if(insertComma)
returnData += ",";
returnData += "after: Date.parseDate('" + value.after.format('m/d/Y') + "','m/d/Y')";
insertComma = true;
}
if(value.on != null)
{
if(insertComma)
returnData += ",";
returnData += "on: Date.parseDate('" + value.on.format('m/d/Y') + "','m/d/Y')";
}
returnData += "}";
}
else if(type == "string")
{
returnData = "\"" + value.replace(/"/g,"\\\"") + "\"";
}
return returnData;
}

mike1993
27 Jan 2011, 9:17 AM
If you have DateFilter and select 'After', 'Before' and then select 'On' option w/o using Date picker, After and Before stay checked

I've added the following patch to onCheckChange


onCheckChange : function (menuItem, checked) {

var fields = this.fields;
var field = this.fields[menuItem.itemId.split('-')[1]];

if((field == fields.on) && checked) {
fields.before.setChecked(false, true);
fields.after.setChecked(false, true);
}
else {
if(checked) {
fields.on.setChecked(false, true);
}
}

this.setActive(this.isActivatable());
this.fireEvent('update', this);
},

pramodkhare
14 Feb 2011, 3:14 AM
Hi friends,
I am using Grid-Filter plugin, But my requirement is, i should be able to do AND ing OR ing of search/filter results, But i dont think and i have tried it also ... that this plugin provides this facility to have AND ing /OR ing of results...


What i mean is,:-

e.g there is grid and i am searching over a column, and i want to search for two values...i.e OR /AND ing

e.g. My filter text input will be like "xyz OR abd".

So it should be give me results where xyz or abd is present in that column value,
Currently it will not give any results for this type of search ...yes i know filter is not a full search.

But still it can improve the functionality in case of large grid-data.

If anyone can please help me it would be very nice.
Thank you.

norbe
2 Mar 2011, 7:15 AM
Hi,

is there any way to display filters under column names? Like in this example (http://addons.nette.org/cs/datagrid#toc-ukazka)

Shobhit Rastogi
28 Mar 2011, 6:36 AM
Hi,

There are three options for the filter in my grid in the column of "Completion date". The three options are "After", "Before", "On". Whenever I apply filter in the grid on this column then filter is working fine. but when I need to change the filter i.e if I change the After filter to the Before filter then first it hide the small window of (After, Before, On) and then I have to again apply filter for Before. I need that when I change the filter, the small window should stay till I click outside the small window/calendar. Means I have to add the mouse over code in the filter of date type column.

Reimius
28 Mar 2011, 8:19 AM
Shobhit Rastogi,

This is an easy fix for you, but may not be the desired functionality for others, here's how to do what you want by adding this line of code which will stop the datefilter date picker from closing when clicked:

hideOnClick: false
to the init function in the javascript file DateFilter.js in the examples/ux/gridfilters/filter

The updated init function should look like (maybe not exactly if I have an old version of grid filters):

init : function (config) {
var menuCfg, i, len, item, cfg, Cls;

menuCfg = Ext.apply(this.pickerOpts, {
minDate: this.minDate,
maxDate: this.maxDate,
format: this.dateFormat,
listeners: {
scope: this,
select: this.onMenuSelect
}
});

this.fields = {};
for (i = 0, len = this.menuItems.length; i < len; i++) {
item = this.menuItems[i];
if (item !== '-') {
cfg = {
itemId: 'range-' + item,
text: this[item + 'Text'],
menu: new Ext.menu.DateMenu(
Ext.apply(menuCfg, {
itemId: item,
hideOnClick: false
})
),
listeners: {
scope: this,
checkchange: this.onCheckChange
}
};
Cls = Ext.menu.CheckItem;
item = this.fields[item] = new Cls(cfg);
}
//this.add(item);
this.menu.add(item);
}
},

a.ti
11 Apr 2011, 8:26 AM
Hi friends,

im am new to Ext. and in my first Grid i try to use this Grid Filter Plugin.

I have spend now days for finding out how to change/redefine/reconfig the config.

The reason why im trying to do this is that my ColumnModel is changing by selecting an Entry in a
ComboBox. That means ColumnModel and Store are dynamic. And after/before (tryed both)
doing a reconfig on the Grid, i try to (re)set the Filter new .. adapted to the new column model..

the are some line of my Code :

var newFilters = new Array();


//....for instance..
newFilters[0] = new Object();
newFilters[0]["type"] = 'string';
newFilters[0]["dataIndex"] = 'newCol1';

newFilters[1] = new Object();
newFilters[1]["type"] = 'string';
newFilters[1]["dataIndex"] = 'newCol2';

var changedFilters = new Ext.ux.grid.GridFilters({filters:newFilters});

grid.plugins.filters.addAll(changedFilters.filters.items);

grid.reconfigure( newStore, newColMod );


The Effect is that the new Columns are all equiped with the Filter Option but as sson as i try to
enter a Value in on of the Filters ..

I get an error called .. "this.grid is Null or not an Object"

What is wrong with my Coding ? Can someone help ? I would really appreciate it ..

Many thanks in advance for your Help Guys !! You all here are GREAT and EXT is a damn Good lib !!

Regards,

a.ti

tdikarim
12 Apr 2011, 12:50 AM
Hi friends,
I am using Grid-Filter plugin, But my requirement is, i should be able to do AND ing OR ing of search/filter results, But i dont think and i have tried it also ... that this plugin provides this facility to have AND ing /OR ing of results...


What i mean is,:-

e.g there is grid and i am searching over a column, and i want to search for two values...i.e OR /AND ing

e.g. My filter text input will be like "xyz OR abd".

So it should be give me results where xyz or abd is present in that column value,
Currently it will not give any results for this type of search ...yes i know filter is not a full search.

But still it can improve the functionality in case of large grid-data.

If anyone can please help me it would be very nice.
Thank you.


Hi,
Do you have a way for do that. I am also interesting by this requirement ...

This plugin is so great
Thanks a lot

tdikarim
12 Apr 2011, 4:10 AM
Hi All,

Ext 3.3.1
After I reconfigure the grid the filter as been cleared. How can I preserve them or save it for re-apply it after reconfigure.

Thanks for your help

hachie
15 Apr 2011, 2:02 AM
I have a Grid with GridFilter in a modal window and when I show for the first times the grid it's work all fine.
If I close the window and after I reopen it the GridFilter in the grid doesn't appears. Why?

a.ti
18 Apr 2011, 7:02 AM
Hey Guys,

does really no one knows how to handle a reconfig with changing the Filter Plugin configs.

I have tried several Options without success .. only wasting time with it :-(..

Can Someone help please ?

regards

A.ti

budaxlingga
1 May 2011, 8:00 AM
Hai all, i'm a newbie in programming. i just try some code from example given in internet.
I try to use grid filter plugin in my project, it worked until i type something to filter field, then nothing happen. i check the "filter" in firebug, and it contain nothing (filter:""). what happen?

what's wrong with my code?
this is my code
sorry for my bed english..


var phonebookStore = new Ext.data.DirectStore({
storeId: 'phonebook-store',
api: {
read: Example.Phonebook.getall
},


paramsAsHash: true,
paramOrder:['start','limit','sort','dir','filter'],
baseParams:{ sort:'NAMA',dir:'ASC',filter:''},
reader: new Ext.data.JsonReader({
fields: ['NO','NIK','NAMA','PHONE_NUMBER','NAMA_GROUP','LOKER','ID_LEVEL','STATUS_USERS','EMAIL','ALAMAT','KOTA','ZIP','PROVINSI','PHONE_OFFICE','PRIORITAS'],
root: 'data',
idProperty:'NIK',
totalProperty:'numrows',
autoSave:false
})

});

var filters=new Ext.ux.grid.GridFilters({
encode:true,
local:false,
filters:[{
type : 'string',
dataIndex : 'NIK'
},{
type : 'string',
dataIndex : 'NAMA'
},{
type : 'string',
dataIndex : 'PHONE_NUMBER'
},{
type : 'string',
dataIndex : 'LOKER'
}]
})
Ext.QuickTips.init();

var tpl=new
Ext.XTemplate(' <div><b>Phone Office:</b>&nbsp;{PHONE_OFFICE}</div>',
'<div><b>Email:</b>&nbsp;{EMAIL}</div>',
'<div><b>Alamat:</b>&nbsp;{ALAMAT}</div>',
'<div><b>Kota:</b>&nbsp;{KOTA}</div>',
'<div><b>Provinsi:</b>&nbsp;{PROVINSI}</div>'
);

var renderCell=function(val,cell,record){
var qtip=this.tpl.apply(record.data);
return '<div qtip="' + qtip + '">' + val + '</div>';
}

panel1 = new Ext.grid.GridPanel({
title:'Phonebook',
layout:'fit',
loadMask: true,
plugins:[filters],
sm:new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners:{
rowselect:function(sm,index,record){
varNik=record.get('NIK');
varRecord=record;
}
}
}),
tbar:[
{
id:'add-button',
iconCls:'addicon',
text:'New',
handler:function(){addUserWindow.show();
groupDest.removeAll();
}
},
'-'
,
{
text:'Delete',
iconCls:'deleteicon',
id:'delete-button',
handler:function(){
if (varNik!=""){
Example.Phonebook.hapus(varNik,function(result){
if (result){
Ext.Msg.alert("Delete User","Delete User Berhasil");}
});
phonebookStore.reload();
} else{
Ext.Msg.alert('Invalid','Please select a row first!');
}
}

}
],
bbar: new Ext.PagingToolbar({
store : phonebookStore,
displayInfo : true,
pageSize : 100,
plugins : [filters],
prependButtons: true,
displayMsg:'Displaying phonebook {0} - {1} of {2}'
}),
store:phonebookStore,
columns:[
{
header :'No',
width : 35,
sortable : true,
renderer : this.renderCell.createDelegate(this),
dataIndex: 'NO'
},
{
id :'nik',
header :'Nik',
width : 75,
sortable : true,
renderer : this.renderCell.createDelegate(this),
filterable:true,
dataIndex: 'NIK'
},
{
header :'Nama',
width : 175,
sortable : true,
renderer : this.renderCell.createDelegate(this),
filterable:true,
dataIndex: 'NAMA'
},
{
header :'No Hp',
width : 100,
sortable : true,
renderer : this.renderCell.createDelegate(this),
filterable:true,
dataIndex: 'PHONE_NUMBER'
},
{
header :'Groups',
width : 275,
sortable : true,
renderer : this.renderCell.createDelegate(this),
filter :{type: 'string', disable:true},
dataIndex: 'NAMA_GROUP'
},
{
header :'Loker',
width : 175,
sortable : true,
renderer : this.renderCell.createDelegate(this),
filterable:true,
dataIndex: 'LOKER'
},
{
header :'Level User',
width : 100,
sortable : true,
renderer : this.renderCell.createDelegate(this),
dataIndex: 'ID_LEVEL'
},
{
header :'Status',
width : 70,
sortable : true,
renderer : this.renderCell.createDelegate(this),
dataIndex: 'STATUS_USERS'
}]
});

budaxlingga
5 May 2011, 3:47 PM
i have another problem now, why my filter always late in send the parameter. It send the previous parameter, not recent parameter.

luisoswaldo
15 Jun 2011, 12:49 PM
I have a problem with icons

The problem is that the icons out mounted above each other in the case of numeric fields. And the image of the text fields (find image) only appears in firefox and not in other browsers.

I leave you a screenshot of the problem

26592

So I add the style sheets. It is necessary to do something else?


<style type="text/css" title="currentStyle" media="screen">
@import "lib/extjs/resources/css/ext-all.css";
@import "lib/extjs/plugins/GridFilter/resources/style.css";

.x-grid3-hd-row td.ux-filtered-column {
font-style: italic;
font-weight: bold;
}
</style>

//In onReady

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.ux.menu.RangeMenu.prototype.icons = {
gt: 'lib/extjs/plugins/GridFilter/resources/greater_then.png',
lt: 'lib/extjs/plugins/GridFilter/resources/less_then.png',
eq: 'lib/extjs/plugins/GridFilter/resources/equals.png'
};
Ext.ux.grid.filter.StringFilter.prototype.icon = 'img/find.png';



Appreciate any help I can offer.

luisoswaldo
15 Jun 2011, 12:59 PM
In firebug when you select the icon shows the following code, which is strange I do not put the url to the image name. Screenshot attached.

http://desarrollopaginasweb.com.ve/archivos/firebug.JPG

jago7372
4 Jul 2011, 1:32 PM
Hi,
please someone help me with filter icons appear over each other I am concerned ExtJS 3.1.1 thank....



26871

jankshtt
28 Jul 2011, 8:49 AM
Hi,

I am filter on a grid and I am trying to run the filter on it. I want o run the filter from code when a user selects a value from a drop down else where in the page.

I see that grid.getFilter('dataIndex').setActive(true) is setting the filter active but i am not sure how to set the value. There is a methid called setValue() but it is a private methos. Is there any way i could do it.

Thanks,
Jankshtt

SunWuKung
10 Oct 2011, 1:21 AM
I am saving and restoring a grid's state that includes a GridFilter.
All works fine until a DateFilter is set in which case I get a value.clearTime is not a function error in DateFilter.js line 216 - this.fields[key].menu.picker.setValue(value[key]);

I guess it's because the value is not a Date object and I can see that here (http://www.sencha.com/forum/showthread.php?14503-Grid-Filter-(Plugin)&p=85517&viewfull=1#post85517) it was suggested to use Date.parseDate - but since in my case the value is created by saving the same DateFilter's state I don't think this is an option here.

How could I get this work?
For the time being I am doing this in DateFilter.js and it seems to work, but any comment is welcome:


setValue : function (value, preserve) {
var key;
for (key in this.fields) {
if(value[key]){
if (!Ext.isDate(value[key])){
value[key]=Date.parseDate(value[key],this.dateFormat) ;
}
this.fields[key].menu.picker.setValue(value[key]);
this.fields[key].setChecked(true);
} else if (!preserve) {
this.fields[key].setChecked(false);
}
}
this.fireEvent('update', this);
}

vbreader
7 Nov 2011, 9:46 AM
I am saving and restoring a grid's state that includes a GridFilter.
All works fine until a DateFilter is set in which case I get a value.clearTime is not a function error in DateFilter.js line 216 - this.fields[key].menu.picker.setValue(value[key]);

I guess it's because the value is not a Date object and I can see that here (http://www.sencha.com/forum/showthread.php?14503-Grid-Filter-(Plugin)&p=85517&viewfull=1#post85517) it was suggested to use Date.parseDate - but since in my case the value is created by saving the same DateFilter's state I don't think this is an option here.

How could I get this work?
For the time being I am doing this in DateFilter.js and it seems to work, but any comment is welcome:

Thank you for the code. It works like a charm.

donremigio
15 Nov 2011, 10:11 AM
Hi
How I can hide from numeric filter equal field. I can delete from RangeMenu.js fields.eq, but I need to hide it only from search filter from one column in grid.

ecko
28 Nov 2011, 4:19 PM
Yeah, I asked the Ext team about support for scrolling menus and they said not in this version >.<

while i agree that too many menu items would be cumbersome, on screens with even moderately low resolution (1280 x), the column menu would extend past the bottom of the screen and be inaccessible with fewer columns than that. I would like to extend this to include a scrolling option. Where can i find the latest source?
(see attached for example)
29641

avorobjovs
28 Dec 2011, 8:07 AM
Hello!

How can I get the latest version of Grid Filter for Ext JS 4?

Thank you in advance!

wm003
2 Jan 2012, 1:41 AM
I am using this to display a scrollbar:


Ext.override(Ext.grid.GridView, {
beforeColMenuShow : function(){
var cm = this.cm, colCount = cm.getColumnCount();
this.colMenu.removeAll();
for(var i = 0; i < colCount; i++){
if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){
this.colMenu.add(new Ext.menu.CheckItem({
id: "col-"+cm.getColumnId(i),
text: cm.getColumnHeader(i),
checked: !cm.isHidden(i),
hideOnClick:false,
disabled: cm.config[i].hideable === false
}));
}
}
//check height to possibly display a scrollbar
var ccH = Ext.lib.Dom.getViewHeight()-100;
if (colCount*24>ccH) {
this.colMenu.getEl().setStyle("overflow-y", "auto");
this.colMenu.getEl().setHeight(ccH);
}
}
});

ing.amdangelo
16 Jan 2012, 7:03 AM
With this plugins is possibile filter remotely ???

// Filtri per la griglia
var filtroUtenti = new Ext.ux.grid.GridFilters({
// encode and local configuration options defined previously for easier reuse
encode: false, // json encode the filter query
local: false, // defaults to false (remote filtering)
menuFilterText: 'Filtri',
filters: [{ type: 'string', dataIndex: 'cognome'},
{ type: 'string', dataIndex: 'nome' },
{ type: 'string', dataIndex: 'citta' },
{ type: 'numeric', dataIndex: 'numIscrizione' }
]
});


// Anagrafica degli Iscritti Nazionale e Provinciale




var listaUtenti = new Ext.grid.GridPanel({
id: 'lstUtenti',
layout: 'fit',
store: storeIscritti,
loadMask: true,
autoWidth: true,
//hidden:true,
stripeRows: true,
selModel: listaUtentiRowSelModel,
listeners: {
rowcontextmenu: doContextMenuListaUtenti
},
bbar: toolbarGridUtenti,
colModel: com,
plugins: [filtroUtenti]
});

in addition to the property 'local' What else should I do

ing.amdangelo
16 Jan 2012, 7:53 AM
var storeIscritti = new Ext.data.JsonStore({
url: '../ajaxUsers.asmx/getAnagraficaJson',
baseParams: { _idAdmin: idAdmin, provincia: provincia, sort: 'cognome', dir: 'ASC', start: 0, limit: 100 },
record: 'User',
remoteSort:true,
totalRecords: 'Totale',
fields: ['idUser', 'cognome', 'nome', 'codiceFiscale', 'indirizzo', 'numIscrizione', 'citta', 'emailOrdinaria', 'emailPEC'],
autoLoad:true
});
var com = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{ header: 'idUser', dataIndex: 'idUser', hidden: true },
{ header: 'Photo', dataIndex: 'emailPEC', width: 105, renderer: renderPhoto },
{ header: 'Cognome', dataIndex: 'cognome', width: 90 },
{ header: 'Nome', dataIndex: 'nome', width: 90 },
{ header: 'Codice Fiscale', dataIndex: 'codiceFiscale', width: 132 },
{ header: 'Indirizzo', dataIndex: 'indirizzo', width: 200 },
{ header: 'Citta', dataIndex: 'citta', width: 150 },
{ header: 'Num Iscrizione', dataIndex: 'numIscrizione', width: 80, align: 'center' },
{ header: 'email @ Ordinaria', dataIndex: 'emailOrdinaria', width: 100, hidden: true },
{ header: 'email @ PEC', dataIndex: 'emailPEC', width: 250 }
]
});


var listaUtentiRowSelModel = new Ext.grid.RowSelectionModel({
singleSelect: true
});




// Filtri per la griglia
var filtroUtenti = new Ext.ux.grid.GridFilters({
// encode and local configuration options defined previously for easier reuse
encode: true, // json encode the filter query
local: false, // defaults to false (remote filtering)
menuFilterText: 'Filtri',
filters: [{ type: 'string', dataIndex: 'cognome' },
{ type: 'string', dataIndex: 'nome' },
{ type: 'string', dataIndex: 'citta' },
{ type: 'numeric', dataIndex: 'numIscrizione' }
]
});




//toolbar per la Paginazione
var toolbarGridUtenti = new Ext.PagingToolbar({
id: 'tbGridUtenti',
pageSize: 100,
plugins: [filtroUtenti],
store: storeIscritti,
displayInfo: true,
displayMsg: 'Elementi visualizzati da {0} a {1} di {2}',
emptyMsg: "Nessun elemento trovato"
})





// Anagrafica degli Iscritti Nazionale e Provinciale




var listaUtenti = new Ext.grid.GridPanel({
id: 'lstUtenti',
layout: 'fit',
store: storeIscritti,
loadMask: true,
autoWidth: true,
//hidden:true,
stripeRows: true,
selModel: listaUtentiRowSelModel,
listeners: {
rowcontextmenu: doContextMenuListaUtenti
},
bbar: toolbarGridUtenti,
colModel: com,
plugins: [filtroUtenti]
});

Can i Obtain remote filtering ....... ???

Help me please ??

ing.amdangelo
16 Jan 2012, 7:54 AM
The Store is Xml ..............

//Store degli Utenti
var storeIscritti = new Ext.data.XmlStore({
url: '../ajaxUsers.asmx/getAnagrafica',
baseParams: { _idAdmin: idAdmin, provincia: provincia, sort: 'cognome', dir: 'ASC', start: 0, limit: 100 },
record: 'User',
remoteSort:true,
totalRecords: 'Totale',
fields: ['idUser', 'cognome', 'nome', 'codiceFiscale', 'indirizzo', 'numIscrizione', 'citta', 'emailOrdinaria', 'emailPEC'],
autoLoad:true
});

ing.amdangelo
18 Jan 2012, 12:53 AM
there would be very grateful

tksko
31 May 2012, 5:08 AM
hi!
I am using this great plugin but i need for date fields to filter with time too (TimeStamp). Is it possible?

thanks

cleydsonjr
10 Jul 2012, 5:49 AM
I downloaded the source zip 0.2.8. But in order to make it work i had to add the ListMenu.js to the index.html list of scripts.