PDA

View Full Version : GridFilter Extension for 3.x



sabiola
22 Jun 2009, 12:41 AM
Moderator edit: There's a 3.x version in svn now for those interested, click here (http://extjs.com/forum/showthread.php?t=76185).



Hello,

I create a new thread for the GridFilter Extension here, because I think the 2.0 Community Board is the wrong place to diskuss 3.x problems with this extension.

Here is the Link to the 2.0 Community Board:
http://www.extjs.com/forum/showthread.php?t=14503

I wrote a Mail to the orignal author of the extension, asking for a 3.0 version.
Here is his answer:

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

So "mjlecomte" took over the development of the Extension and asks for help:
http://www.extjs.com/forum/showthread.php?p=345142#post345142

I think there a lot of people waiting for a 3.x version, so lets start collecting problems...

Greetings,
Stefan

sabiola
22 Jun 2009, 12:53 AM
Hello,

so, I start with two problems, we have:

1.) I create a new filter( in my code ) for just one column of a grid, but the Filter Menu gets added to each column.
The filter on the columns( which are not added ), seems to be a reference to the one column, that was added. When I add a filter to the column, the text of the filter textfield is displayed in the filter textfield on each column.

2.) When a add a filter ( inside the application ), I can't remove this filter by clicking on the check box for this filter. I get this error message:

item.itemId is undefined
index = cm.getIndexById(item.itemId.substr(4));

Greetings,
Stefan

chaoszcat
22 Jun 2009, 2:15 AM
2.) When a add a filter ( inside the application ), I can't remove this filter by clicking on the check box for this filter. I get this error message:

item.itemId is undefined
index = cm.getIndexById(item.itemId.substr(4));

The 2nd problem was solved by simonellistonball @ http://extjs.com/forum/showthread.php?p=338191#post338191

Simply add on a fix.js with code: [Tested with my Extjs 3.0RC2 + GridFilter 0.2.8]


//Problem with GridFilter generates d.itemId undefined
//Refer to: http://extjs.com/forum/showthread.php?p=335945#post335945
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;
};


This works for me.

and for the problem 1, I am looking at how to solve the problem by fixing the library itself.

sabiola
22 Jun 2009, 3:42 AM
Hello chaoszcat,

thanks for your answer. This works :-)

And this shopuld fix Bug #2:


Ext.ux.grid.GridFilters.prototype.onMenu = function(filterMenu){
var filter = this.getMenuFilter();
if(filter){
this.menu.menu = filter.menu;
this.menu.setChecked(filter.active, false);
}

this.menu.setVisible(filter !== undefined && filter !== null);
this.sep.setVisible(filter !== undefined && filter !== null);
}


Greetings,
Stefan

tonedeaf
22 Jun 2009, 4:15 AM
Hi sabiola,
I would also like to see this extension ported to ExtJS 3.0

For 3.0 rc1, I observed an issue with the Grid Filter menu icon alignment and reported here:
http://extjs.com/forum/showthread.php?p=322803#post322803

In short, the screenshot below (in 3.0rc2) still shows a "#" symbol before the ">", "<" and "=" in the menus. I applied all the CSS fixes outlined in the forum discussion link above.

Are you also observing this in 3.0rc2? If no, then I'll have to check my included CSS files and maybe a custom CSS rule is causing the issue in my installation.

chaoszcat
22 Jun 2009, 6:02 PM
Hi sabiola,
I would also like to see this extension ported to ExtJS 3.0

For 3.0 rc1, I observed an issue with the Grid Filter menu icon alignment and reported here:
http://extjs.com/forum/showthread.php?p=322803#post322803

In short, the screenshot below (in 3.0rc2) still shows a "#" symbol before the ">", "<" and "=" in the menus. I applied all the CSS fixes outlined in the forum discussion link above.

Are you also observing this in 3.0rc2? If no, then I'll have to check my included CSS files and maybe a custom CSS rule is causing the issue in my installation.

I think the '#' symbol is because you haven't remove the extra icons.

This is my solution posted not long ago. Hope that fix. Make sure your libraries are fresh, and do the fix as shown in the following link:
http://extjs.com/forum/showthread.php?p=343966#post343966
:D

mjlecomte
23 Jun 2009, 8:55 AM
I was thinking to deprecate the "filters" config option of GridFilters class, instead just grab configs from the ColumnModel.


I think this would have a few benefits:


could offer automatic filter building based on the type specified in the Column config
would more easily support grid.reconfigure() and metachange event support



So then instead of this:



var filters = new Ext.ux.grid.GridFilters({
local: true, // defaults to false (remote filtering)
filters: [{
type: 'numeric',
dataIndex: 'id'
}, {
type: 'string',
dataIndex: 'company'
}, {
type: 'numeric',
dataIndex: 'price'
}, {
type: 'date',
dataIndex: 'date'
/*
}, {
type: 'list',
dataIndex: 'size',
options: ['small', 'medium', 'large', 'extra large'],
phpMode: true
*/
}, {
type: 'boolean',
dataIndex: 'visible'
}]
});

var colModel = new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'id',
header: 'Id'
}, {
dataIndex: 'company',
header: 'Company',
id: 'company'
}, {
dataIndex: 'price',
header: 'Price'
}, {
dataIndex: 'date',
header: 'Date',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'size',
header: 'Size'
}, {
dataIndex: 'visible',
header: 'Visible'
}],
defaults: {
sortable: true
}
});

You could do this:


var filters = new Ext.ux.grid.GridFilters({
local: true // defaults to false (remote filtering)
});

var colModel = new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'id',
header: 'Id',

filter: {
type: 'numeric',
// more configs here
}

}, {
dataIndex: 'company',
header: 'Company',
id: 'company',

filter: {
type: 'string',
// more configs here
}

}, {
dataIndex: 'price',
header: 'Price',

filter: {
type: 'numeric',
// more configs here
}

}, {
dataIndex: 'date',
header: 'Date',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
filterable: false

filter: {
type: 'date',
// more configs here
}

}, {
dataIndex: 'size',
header: 'Size'

// no filter config .... so .... no Filtering

}, {
dataIndex: 'visible',
header: 'Visible',

filter: {
type: 'list',
dataIndex: 'size',
options: ['small', 'medium', 'large', 'extra large'],
phpMode: true
}

}],
defaults: {
sortable: true,
filterable: true
}
});

Or just forget the "type" config in the ColumnModel and just use the "filter" config in the ColumnModel.

azbok
23 Jun 2009, 10:56 AM
I was thinking to deprecate the "filters" config option of GridFilters class, instead just grab configs from the ColumnModel.

...


With the MetaGrid stuff I'm working with (that you wrote), the meta data is crafted up that way - the filters are in the "fields" property which is almost directly sent to the ColumnModel. If the GridFilter works directly with the ColumnModel then I would assume there would be less special coding required in the MetaGrid.

sabiola
24 Jun 2009, 12:36 AM
@mjlecomte:

Looks great :-)

Stefan

matt4447
24 Jun 2009, 7:42 AM
Hi everyone,

Is there a place where I can see some full sample code of the fixed 3.0 version of the GridFilters plugin?

I'm not quite sure I am piecing everything together, correctly, from the posts above.

Thanks,

Matt

mjoksa
25 Jun 2009, 1:22 AM
I successfully implemented all fixes mentioned in posts above and everything works fine with filtering.
I work with C# and use Newtonsoft JSON library for encode/decode data for ExtJS controls.
I had problem with the way grid filter is sending it data (e.g. filter[0][data][value] and/or something similar :)) so I changed this and grid filter data is now sent JSON encoded to server. Below is my code changes (GridFilter.js):


onBeforeLoad: function(store, options){
options.params = options.params || {};
this.cleanParams(options.params);
//Old way
// var params = this.buildQuery(this.getFilterData());

//My way :)
var params = {
filterData: Ext.encode(this.getFilterData())
};
Ext.apply(options.params, params);
},
...
getFilterData: function(){
var filters = [],
fields = this.grid.getStore().fields;

this.filters.each(function(f){
if(f.active){
var d = [].concat(f.serialize());
//Old way
// for(var i=0, len=d.length; i<len; i++)
// filters.push({
// field: f.dataIndex,
// data: d[i]
// });

//My way :)
filters.push({
field: f.dataIndex,
data: d
});
}
});

return filters;
},

On server side I created two classes


public class FilterData
{
public string type { get; set; }
public string value { get; set; }
public string comparison { get; set; }
}
public class GridFilterData
{
public string field { get; set; }
public List<FilterData> data { get; set; }
}

so when I JSON decode received grid filter data I get array (list) of GridFilterData objects and I can use LINQ magic :) to create adequate queries.
Feel free to use this code changes but I would like them to be implemented (maybe as some config option to chose who to send grid filter data) in new versions of this plugin.

Cheers

azbok
25 Jun 2009, 7:55 AM
@mjoksa (http://extjs.com/forum/member.php?u=5748)

I've done a similar thing to GridFilters in the past, but after I did that, I found the comment for overriding buildQuery. Now I directly use the code provided in that comment. It's generally better off not changing the original code and just doing overrides for custom application changes. That way you don't need to worry about merging when a new version of GridFilters (or whatever you end up changing) comes out.

Btw the filter[0][data][value] style is for PHP.

mjoksa
25 Jun 2009, 11:19 AM
@azbok
10x for input
I will certainly implement override first thing in the morning.

sabiola
28 Jun 2009, 11:55 PM
Hello,


I've done a similar thing to GridFilters in the past, but after I did that, I found the comment for overriding buildQuery.

can you please post a link to this comment?

Thanks,
Stefan

azbok
29 Jun 2009, 9:22 AM
I'm actually using the GridFilter from the svn repo http://extjs-ux.org/repo/trunk, it could be this comment isn't actually in the 0.2.8 package you download from the first post of this thread.

This is not my comment, this is the comment from the code itself that I have:



/**
* Function to take structured filter data and 'flatten' it into query parameteres. The default function
* will produce a query string of the form:
* filters[0][field]=dataIndex&filters[0][data][param1]=param&filters[0][data][param2]=param...
* You can override this function to return json:
* <pre><code>
* buildQuery: function(filters) {
* var p = {};
* var len = filters.length;
* for(var i=0; i<len; i++) {
* var f = filters[i];
* if (f.data.comparison) {
* if (typeof(p[f.field]) != 'object') {
* p[f.field] = new Object();
* }
* p[f.field][f.data.comparison] = f.data.value;
* } else {
* p[f.field] = f.data.value;
* }
* }
* var tmp = {};
* tmp["extjs_filter_encoded"] = Ext.util.JSON.encode(p)
* return tmp;
* }
* </code></pre>

mjlecomte
29 Jun 2009, 9:28 AM
Maybe we should introduce an "encode" config that will toggle the default buildQuery and that shown in the commentary?

azbok
29 Jun 2009, 9:30 AM
Maybe we should introduce an "encode" config that will toggle the default buildQuery and that shown in the commentary?

I think that's an awesome idea, since across the board, people will need to copy/paste the comment into their own overrides and potentially make errors. Certainly if it's built in, there's less errors to be made!

sabiola
2 Jul 2009, 12:17 AM
@mjlecomte:

Will we get a "new version" bofore the release of 3.0 final?

Thanks for your work,
Stefan

mjoksa
2 Jul 2009, 2:14 AM
@mjlecomte
As I said in my previous post I am NET Framework user, and I had to change getFilterData method to better suite my needs so please reconsider my code changes for final version and please implement encode option as you mentioned.

Best regards

mjlecomte
3 Jul 2009, 8:38 AM
@mjlecomte:

Will we get a "new version" bofore the release of 3.0 final?

Thanks for your work,
Stefan

It looks like the version I have won't be available until after 3.0.0 is released.

jthevenoux
7 Jul 2009, 1:26 AM
Nobody say there's a bug :


index = cm.getIndexById(item.itemId.substr(4));

index = cm.getIndexById(item.getItemId().substr(4));
So, "real" Ext 3.0, doesn't include correction ...
:((

sabiola
7 Jul 2009, 3:47 AM
Hello,

with RC3 my filter where working. Now with 3.0 Final I get this error:

this.toolbar.paramNames is undefined
var start = this.toolbar.paramNames.start;
in GridFilters.js (Linie 314)


Somebody with an idea?

Thanks and greetings,
Stefan

mjlecomte
7 Jul 2009, 3:58 AM
Try replacing with



var start = this.grid.getStore().paramNames.start;

sabiola
7 Jul 2009, 4:14 AM
Hello,


Try replacing with


var start = this.grid.getStore().paramNames.start;



this works :-)

Thanks,
Stefan

bumz
9 Jul 2009, 3:26 AM
Think better to replace with this code, as it will use this.toolbar private variable


this.toolbar.getParams().start;

UPD: code

mjlecomte
9 Jul 2009, 4:27 AM
Think better to replace with this code, as it will use this.toolbar private variable


this.toolbar.getParams().paramNames.start;

But, as you said, that's a private variable (and method?).....and that method is only there for deprecation of toolbar.paramNames property. Seems better to go directly to the store where it's a public config/property that is not deprecated.

bumz
9 Jul 2009, 5:04 AM
Yep, i've used private variable toolbar. Is it wrong when making fixes to plugin? I've put a function instead of deprecated variable. That's all. So plugin can access to toolbar's getPrams() instead of store. I know it's actually the same. :)
by the way: I've made a little mistake in my code and now updated it.

mjlecomte
9 Jul 2009, 5:51 AM
Yep, i've used private variable toolbar. Is it wrong when making fixes to plugin? I've put a function instead of deprecated variable. That's all. So plugin can access to toolbar's getPrams() instead of store. I know it's actually the same. :)
by the way: I've made a little mistake in my code and now updated it.

There's more of an effort to main consistency for the publicly documented class properties. getParams() is undocumented so may change. getParams() was only introduced to facilitate honoring a deprecated property in the toolbar, so getParams() may be removed in future release since it's only there to handle deprecated item.

The store properties are not listed as deprecated and are public, so there's better chance it will remain as is in future releases.

bumz
9 Jul 2009, 7:06 AM
There's more of an effort to main consistency for the publicly documented class properties. getParams() is undocumented so may change. getParams() was only introduced to facilitate honoring a deprecated property in the toolbar, so getParams() may be removed in future release since it's only there to handle deprecated item.

The store properties are not listed as deprecated and are public, so there's better chance it will remain as is in future releases.
Okay, i thought it was a new undocumented function :) Never thought I'll have an undocumented function to facilitate honoring a deprecated property.

narutobaka
10 Jul 2009, 12:41 AM
I everyone ,

I've got some probleme with grid-filter.

Don't know if it's the good post for ask help.

I use ext-3.0.0 with 0.2.8 grid-filter plugin.




<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript" src="grid_filter/ux/menu/EditableItem.js"></script>
<script type="text/javascript" src="grid_filter/ux/menu/RangeMenu.js"></script>

<script type="text/javascript" src="grid_filter/ux/grid/GridFilters.js"></script>

<script type="text/javascript" src="grid_filter/ux/grid/filter/Filter.js"></script>
<script type="text/javascript" src="grid_filter/ux/grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="grid_filter/ux/grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="grid_filter/ux/grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="grid_filter/ux/grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="grid_filter/ux/grid/filter/BooleanFilter.js"></script>

<script>
function init()
{
//récupération des données à afficher
var store=new Ext.data.JsonStore
(
{
url:"fichier_donnee.php",
root:"data",
//définition du format des données
fields:
[
{name:"id"},
{name:"nom"},
{name:"prenom"},
{name:"age",type:"int"}
]
}
);

var filters = new Ext.ux.grid.GridFilters
(
{
filters:
[
//{type: 'numeric', dataIndex: 'id'},
{type: 'string',dataIndex: 'nom'},
//{type: 'string',dataIndex: 'prenom'},
//{type: 'string',dataIndex: 'age'}
//{type: 'date', dataIndex: 'dateAdded'},
//{type: 'list',dataIndex: 'size',options: ['extra small', 'small', 'medium', 'large', 'extra large'],phpMode: true},
//{type: 'boolean', dataIndex: 'visible'}
]
}
);

var grid=new Ext.grid.GridPanel
(
{
renderTo : Ext.getBody(),
store:store,
height:500,
width:700,
plugins: filters,
sm : new Ext.grid.RowSelectionModel({singleSelect:true}),
listeners :
{
rowclick : function(g,index)
{
//alert(index);
var rec=store.getAt(index); //de type record
//avant d'accèder au valeur de l'id il faut penser à l'ajouter à la liste des champs dans la création des fields
var num_bon=rec.get("id");

////////////////////////////////////////////////////////
//uniquement compatible ie
//window.location.href("test1.html?num_bon="+num_bon)
////////////////////////////////////////////////////////

////////////////////////////////////////////////////////
//compatible ie,firefox
document.location="test1.html?num_bon="+num_bon;
////////////////////////////////////////////////////////

//alert (num_bon);
}
},// ne pas oublier la virgule il d'agit d'une liste JSon
columns:
[
{header:"Nom du mec",dataIndex:"nom",width:200,sortable:true},
{header:"Prenom du mec",dataIndex:"prenom",width:200,sortable:true},
{header:"Age du mec",dataIndex:"age",width:200,sortable:true}
]
}
);

/*var win = new Ext.Window
(
{
title:"test",
width: 600,
height: 450,
items:grid,
maximize:true
}
);*/

store.load();
//win.show();
}
Ext.onReady(init);
</script>
</head>
<body>
</body>
</html>



When I use the filter nothing append on the data I want to filter.

I'm a noob in EXTJS and ask for help.

thanks.

tobiu
13 Jul 2009, 4:06 PM
hi together,

i just tried the colorPickerField-ux of
http://extjs.com/forum/showthread.php?p=357495

and this working together. after a long time of debugging, i found out that



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


is destroying the colorPicker. i am still not sure why, since the css of that do not touch x-menu and i was not able yet to see the conflicting-point.

sorry for "cross-posting" this, but in my eyes the problem affects both ux in a way.

is the specified css still used in the new grid-filter ux versions or is there a newer solution?

thanks for your help, tobiu

tobiu
15 Jul 2009, 9:36 AM
i think i have a working solution now.
therefore you have to change the EditableItem.js:



Ext.namespace("Ext.ux.menu");
Ext.ux.menu.EditableItem = Ext.extend(Ext.menu.BaseItem, {
itemCls : "x-menu-item",
hideOnClick: false,

initComponent: function(){
this.addEvents({keyup: true});
this.editor = this.editor || new Ext.form.TextField();
if(this.text)
this.editor.setValue(this.text);
},

onRender: function(container){
var s = container.createChild({
cls: this.itemCls,
style: 'display: inline;',
html: ''
});
...


with this, you do not need


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


anymore and the colorPicker-ux won't get destroyed.

kind regards, tobiu

dongryphon
15 Jul 2009, 3:06 PM
I'd love to see a link to a zip I can download with all the latest fixes/enhancements. Most other threads place such a link in a "blog-like" message on page 1 of the thread... would be nice... Thanx!

Keep up the good work!

wiznia
16 Jul 2009, 3:24 AM
I also think it's a good idea to put the config of the filters in the columnModel, it seems natural to define it there. I was planning to add the posibility to create the filters automatically looking at the data type of the store's fields and even, if it's an editable grid, try to use the same editor for the filters, what do you think?

About the buildQuery method. I think the override in the comments it's not that good, because now you have the posibility to send multiple filters for each field if you wanted to, in that override since its returning an object you are limited to one filter per field. Am right? I posted here (https://extjs.com/forum/showthread.php?t=14503&page=80#post354055) a modification for the phpMode option for the list filter (you don't have to serialize and desarialize the options) and I it should work in the same way in php and other backends (I'm not sure, since I only tried it in php).

Another fix I made is that in the saveState method (the version I had) didn't check the suspendStateStore which was set in applyState, so the fix is:

saveState: function(grid, state){
if(!this.suspendStateStore) {
var filters = {};
this.filters.each(function(filter){
if(filter.active)
filters[filter.dataIndex] = filter.getValue();
});
return state.filters = filters;
}
},
Besides I added a configuration option to the string filter to have the capability to filter if the value starts / ends / has / equals to the filter (although no UI defined for this). Here's the code of the entire file:

Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
/**
* @cfg {Ext.ux.grid.filter.StringFilter.comparisonTypes} comparisonType Type of comparison to use. (Default: EQUALS)
*/
comparisonType: null,
icon: 'ux-gridfilter-text-icon',

init: function(){
if(!this.comparisonType) {
this.comparisonType = Ext.ux.grid.filter.StringFilter.comparisonTypes.EQUALS;
}
var value = this.value = new Ext.ux.menu.EditableItem({iconCls: this.icon});
value.on('keyup', this.onKeyUp, this);
this.menu.add(value);

this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
},

onKeyUp: function(event){
if(event.getKey() == event.ENTER){
this.menu.hide(true);
return;
}

this.updateTask.delay(this.updateBuffer);
},

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

fireUpdate: function(){
if(this.active)
this.fireEvent("update", this);

this.setActive(this.isActivatable());
},

setValue: function(value){
this.value.setValue(value);
this.fireEvent("update", this);
},

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

serialize: function(){
var args = {type: 'string', value: this.getValue(), comparison: this.comparisonType};
this.fireEvent('serialize', args, this);
return args;
},

validateRecord: function(record){
var val = record.get(this.dataIndex);

if(typeof val != "string")
return this.getValue().length == 0;

switch(this.comparisonType) {
case Ext.ux.grid.filter.StringFilter.comparisonTypes.ANY:
return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
break;
case Ext.ux.grid.filter.StringFilter.comparisonTypes.EQUALS:
return val.toLowerCase() == this.getValue().toLowerCase();
break;
case Ext.ux.grid.filter.StringFilter.comparisonTypes.STARTS:
return val.toLowerCase().indexOf(this.getValue().toLowerCase()) == 0;
break;
case Ext.ux.grid.filter.StringFilter.comparisonTypes.ENDS:
var idx = val.toLowerCase().indexOf(this.getValue().toLowerCase());
return idx != -1 && idx + this.getValue().length == val.length;
break;
}
}
});

Ext.ux.grid.filter.StringFilter.comparisonTypes = {ANY: 'any', EQUALS: '=', STARTS: 'starts', ENDS: 'ends'};

alg
16 Jul 2009, 7:24 AM
Hello,


Try replacing with


var start = this.grid.getStore().paramNames.start;


this works :-)

Thanks,
Stefan

You can keep the original code (var start = this.toolbar.paramNames.start) if you explicity declare the PARAMNAMES in the Toolbar config section, like this:

var tbPAGING = new Ext.PagingToolbar({
(...)
paramNames: {
start: 'start',
limit: 'limit'
}
});

mjlecomte
16 Jul 2009, 7:40 AM
You can keep the original code (var start = this.toolbar.paramNames.start) if you explicity declare the PARAMNAMES in the Toolbar config section, like this:

var tbPAGING = new Ext.PagingToolbar({
(...)
paramNames: {
start: 'start',
limit: 'limit'
}
});

That's a bad idea IMO because it is deprecated.

alg
16 Jul 2009, 11:37 PM
I agree (besides that: thanks for the "upgrade guide from Ext-Js 2 to 3"!), but waiting for a "final release" of "GridFilter Plugin for Ext-JS 3" I prefer to change the code of pages of my own application and not to mess around with the ever-changing "plugin pages" ;)

carbotex
23 Jul 2009, 2:49 PM
Does Grid Filter plugin only support GroupingStore? Can I use this on regular GridPanel with regular Ext.data.Store?

mjlecomte
23 Jul 2009, 3:24 PM
Can I use this on regular GridPanel with regular Ext.data.Store?
Yes.

carbotex
24 Jul 2009, 7:25 AM
Ok, maybe I'm missing something. I'm using ExtJS 3.0 and GridFilter 0.2.8. I can see the "Filters" checkbox, I can also see the values from the store being populated properly, and when I check and uncheck the items, the correct Ids are being posted as well.

Now the problem is when I'm trying to uncheck the "Filters" item, Firebug reports "item.itemId is undefined" and the check mark stays..




Firebug Console:

item.itemId is undefined
index = cm.getIndexById(item.itemId.substr(4));\n




Here is the snippets of the code.



var practiceStore = Ext.StoreMgr.get('practiceStore');
var filters = new Ext.ux.grid.GridFilters({
filters: [
{type: 'list', dataIndex: 'practiceId', store: practiceStore, labelField: 'practiceArea'}
]
});


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



Does anyone have encountered this problem before?

azbok
24 Jul 2009, 8:53 AM
Check out: http://www.extjs.com/forum/showthread.php?p=346978#post346978

That's probably the fix to your problem!

The change is the


switch (item.getItemId()) { // NEW: gets the item id thru the access fn




switch(item.itemId){ // OLD: Probably doesn't exist anymore


That update should be fixed in the main Ext 3.0.0 code. I guess it has to be posted separately as a bug?

aranacarlospe
25 Jul 2009, 2:36 PM
Without touch the ext3 code do this in GridFilter.js


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

if(this.showMenu){
hmenu = this.grid.getView().hmenu;

this.sep = hmenu.addSeparator();
this.menu = hmenu.add(new Ext.menu.CheckItem({
text: this.menuFilterText,
itemId: 'itid',
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());
},

carbotex
27 Jul 2009, 8:24 AM
Thanks for the replies.

I have another problem with Grid Filters when using 'list' type and Ext.data.ArrayStore, the list works on regular Ext.data.Store with HttpProxy or any proxy defined.

Below is the Ext.data.ArrayStore


var leadRatingStore = new Ext.data.ArrayStore({
id: 0,
fields: ['id', 'name'],
data:[[1, 'Cold'], [2, 'Warm'], [3, 'Hot']]
});


Here is the code where I configure the filters:


var filters = new Ext.ux.grid.GridFilters({
encode: true,
filters: [
{type: 'list', dataIndex: 'industry_id', store: Ext.StoreMgr.get('industryStore'), labelField: 'industry'}, //Note: industryStore is using HttpProxy to populate the data.
{type: 'list', dataIndex: 'rating', store: leadRatingStore, labelField: 'name'}
]
});


When I try to list the rating filter items, firebug reported this error message, the list item does not get populated.



this.proxy is undefined
anonymous("read", Object name=a, Object params=Object)1 (line 1)
anonymous(Object params=Object)1 (line 1)
anonymous()1 (line 86)
anonymous(Object name=a)1 (line 5)
anonymous()1 (line 1)
[Break on this error] Ext.DomHelper=function(){var s=null,j=/^...b.stopEvent();this.completeEdit()}}}});\n


Did I miss something on setting up the ArrayStore?

mjlecomte
29 Jul 2009, 4:07 AM
Untested, try this:

{
type: 'list', dataIndex: 'rating',
store: leadRatingStore,
labelField: 'name',
options: ['Cold', 'Warm', 'Hot']
}
If your data is local you should use the options config, otherwise store.load() will get called.

carbotex
29 Jul 2009, 6:46 AM
I need the ids as filters data instead of the text. The code below works for me:



{
type: 'list',
dataIndex: 'rating',
options:[[1, 'Cold'], [2, 'Warm'], [3, 'Hot']]
}

azbok
29 Jul 2009, 7:05 AM
@aranacarlospe, (http://extjs.com/forum/member.php?u=34660) that is a much better fix, thanks! Now I don't need a whole override anymore.

foxmarco
29 Jul 2009, 9:23 AM
Hi all,
with this plugin and groupHeaderPlugin the header of wrong cell become highlighted.

I think the problem is in this code:


/** private **/
updateColumnHeadings: function(view){
if(!view || !view.mainHd) return;

var hds = view.mainHd.select('td').removeClass(this.filterCls);
for(var i=0, len=view.cm.config.length; i<len; i++){
var filter = this.getFilter(view.cm.config[i].dataIndex);
if(filter && filter.active)
hds.item(i).addClass(this.filterCls);
}
}


Could anyone solve this little bug??

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

renoye
6 Aug 2009, 1:53 PM
for local store, I feel this is needed



reload: function() {
if (this.local) {
this.grid.store.clearFilter(true);
this.grid.store.filterBy(this.getRecordFilter());
if (this.toolbar) {
this.toolbar.doLoad(0);
}
this.deferredUpdate.cancel();
var store = this.grid.store;
if (this.toolbar) {
var start = this.toolbar.paramNames.start;
if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {
store.lastOptions.params[start] = 0;
}
}
store.reload();
}
},



after filter state changed, this plugin apply filters to the store. It also needs to notify the page toolbar since filterBy method of store won't do anything on pafe tool bar.

CliffM
4 Sep 2009, 6:53 AM
I am trying to load a filter from a store, and it's almost working. The filter menu shows the labels from the store, but the values it sends to my php script are system-generated. (like ext-record-820)

please forgive typos, if any. I am not able to copy and paste, as my work network is separate from our internet network.



var states_store = new Ext.data.JsonStore({
autoDestroy: true,
proxy: new Ext.data.HttpProxy({
url: 'get_states.php',
method: 'POST'
}),
root: 'states',
fields: ['state']
})

var filters = new Ext.ux.grid.GridFilters({filters:[
{type: 'list', dataIndex: 'STATE', store: states_store, labelfield: 'state'}
]})


Using Ext 3.0.0 and GridFilters 0.2.8.

What am I missing?

CliffM
4 Sep 2009, 6:55 AM
I have SVN access, how/where do I get the latest GridFilters plugin/extension. Do I just checkout trunk, build it and it's there? Or is it somewhere else?

CliffM
4 Sep 2009, 7:40 AM
I am trying to load a filter from a store, and it's almost working. The filter menu shows the labels from the store, but the values it sends to my php script are system-generated. (like ext-record-820)

please forgive typos, if any. I am not able to copy and paste, as my work network is separate from our internet network.



var states_store = new Ext.data.JsonStore({
autoDestroy: true,
proxy: new Ext.data.HttpProxy({
url: 'get_states.php',
method: 'POST'
}),
root: 'states',
fields: ['state']
})

var filters = new Ext.ux.grid.GridFilters({filters:[
{type: 'list', dataIndex: 'STATE', store: states_store, labelfield: 'state'}
]})
Using Ext 3.0.0 and GridFilters 0.2.8.

What am I missing?

turns out I just needed to modify the data I was returning. If the data has the columns 'id' and 'text' defined, it works. No need to use labelField.

The Transporter
8 Sep 2009, 4:35 AM
Hello,

I've setup GridFilters on my application and it's working very well.

I only have a slight problem.

When I set too much filters, it's possible that there are no results, so the JSON returned is:


({"total":"0","results":null})

The problem is that the Grid contains always the latest results found and it doesn't clear the grid when no results are found.

Is there a workaround or sth like that ?

Thanks !

wiznia
8 Sep 2009, 12:09 PM
Try returning:

{"total":"0","results":[]}
The results property should always be an array.

The Transporter
8 Sep 2009, 1:26 PM
Try returning:

{"total":"0","results":[]}
The results property should always be an array.

Thanks it's working !!!

suhorukovs
9 Sep 2009, 6:40 AM
Hello! i have an error after that executing code like this:


var conn = new Ext.data.Connection({
url: '<some_url>',
timeout: 30000000
});

conn.request({
success: function(resp, opt) { < some_work >
},
failure: function(resp, opt) {
try {
g_btn.enable();
}
catch(e) {}

store_rep.each(function(el) {
if (el.data.status == 'Формирование...') {
el.set('status', 'Ошибка');
el.commit();

write_log('*** Ошибка при формировании отчета "' + el.data.title + '" с параметрами ' + el.data.param + '.');
write_log('*** ' + resp.status);
write_log('*** ' + resp.statusText);
write_log('*** ' + resp.responseText);
write_log_sep();
}
});

build_rep(g_rid, g_btn);
},
params: {
rid: rec.data.rid,
id: rec.data.id,
data: rec.data.param
}
});


if request is executed = 60 minutes - then raised failure:
response.status = 0
response.statusText = 'communication failure'.

Why this error getting after 60 minutes??
How to avoid this situation??
This Problem exists only in IE. somebody knows why?

Thanks!!!

xrx215
8 Jan 2010, 7:04 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.

Grolubao
15 Jan 2010, 8:12 AM
Not sure if it was mentioned before, and if it's the proper place, but in GridFilter.css the following breaks the datefield layout for IE6 and IE7:



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


Also, the "Temprary Patch for Bug ??" comment suggest that eventually there was a bug related to this. Is it fixed?

jingyukxy
19 Jan 2010, 11:05 PM
yeah ,sure , you can do it,
but what do you want?
it's not a good diea!

zeruyo
10 Jun 2010, 6:38 AM
when I call clearFilters() method I expect that values in the various filter controls (textbox, calendar, etc...) got cleared too. Is there any way to accomplish this? I searched through the forum (2.x too) but I didn't find anything about this.
Thanks.

msinn
10 Jun 2010, 11:38 PM
turns out I just needed to modify the data I was returning. If the data has the columns 'id' and 'text' defined, it works. No need to use labelField.


I am trying to load a filter from a store, and it's almost working. The filter menu shows the labels from the store, but the values it sends to my php script are system-generated. (like ext-record-820)

please forgive typos, if any. I am not able to copy and paste, as my work network is separate from our internet network.



var states_store = new Ext.data.JsonStore({
autoDestroy: true,
proxy: new Ext.data.HttpProxy({
url: 'get_states.php',
method: 'POST'
}),
root: 'states',
fields: ['state']
})

var filters = new Ext.ux.grid.GridFilters({filters:[
{type: 'list', dataIndex: 'STATE', store: states_store, labelfield: 'state'}
]})


Using Ext 3.0.0 and GridFilters 0.2.8.

What am I missing?


How to do that when I have more comboboxes with stores in a grid?
My problem is that I can render the filter for the combobox stores, but when I try to check an option and get the grid filtered it doesn't work. The filter works on other columns as datefield or textfield but not on the comboboxes with stores.

Please, please take a look to my simplified showcase:
https://entwicklung.pos-ition.net/test-case/timerecording/index.php

More information about my problem you find in this thread(I found your thread later):
http://www.extjs.com/forum/showthread.php?101236-EditorGridPanel-Filters-don-t-apply-on-comboboxex-with-stores-Summary-Grouping-is&p=475843#post475843

THX a LOT, Marius

zeruyo
11 Jun 2010, 4:03 AM
when I call clearFilters() method I expect that values in the various filter controls (textbox, calendar, etc...) got cleared too. Is there any way to accomplish this? I searched through the forum (2.x too) but I didn't find anything about this.
Thanks.
Found solution here (http://www.extjs.com/forum/showthread.php?76185-GridFilters-enhanced-filtering-for-grids/page11)

Thanks

ylzbzx
23 Mar 2011, 9:33 PM
Thanks,