PDA

View Full Version : Ext.ux.grid.HeaderFIlter



SMMJ_Dev
17 Sep 2011, 2:50 PM
Good Morning/Afternoon/Evening Everyone,

I recently needed a filter for the columns that was not in the menu. So I created this plugin. The problem with the menu filter plugin was that we had a silverlight application along side our ExtJS Grid. When we used the ExtJS Menu, the menu would show up behind the silverlight application. I hope you enjoy it!

Example & Download: Ext.ux.grid.HeaderFilter (http://www.djengineer.com/ExtJSExamples/PluginExamples/HeaderFilter/HeaderFilter.html)

28115

Tested in IE7/IE8/IE9/FF7/& Chrome 14

For IE I had to add this to the page:


if(Ext.isIE){Ext.enableGarbageCollector=false;}


The code can now be found on github: https://github.com/djengineerllc/Ext.ux.grid.HeaderFilter

MeDavid
19 Sep 2011, 9:48 AM
Looking nice, good job!

SMMJ_Dev
19 Sep 2011, 9:59 AM
Thank you, I just found an issue I will be fixing later tonight. When you move the columns, the filter is not moving with it. So I will get that up there tonight. :)

Here is the update if anyone needs it before tonight:

HeaderFilter.js:


Ext.define('Ext.ux.grid.HeaderFilter',{
extend:'Ext.util.Observable',
alias:'plugin.hfilter',
uses:[
'Ext.container.Container',
'Ext.util.DelayedTask'
],
init:function(grid){
var me=this;
me.filterArray=[];
grid.on({
scope:me,
afterrender:me.onGridRender,
columnresize:me.onGridColumnResize,
columnhide:me.onGridColumnHide,
columnshow:me.onGridColumnShow,
columnmove:me.onGridColumnMove
});
grid.addEvents('filterupdate');
},
updateBuffer:500,
onGridColumnHide:function(headerCt,col){
var filter=Ext.getCmp(col.id+"-filter");
if(filter){filter.hide();}
},
onGridColumnShow:function(headerCt,col){
var filter=Ext.getCmp(col.id+"-filter");
if(filter){filter.show();}
},
onGridColumnResize:function(headerCt,col,width){
var filter=Ext.getCmp(col.id+"-filter");
if(filter){filter.setWidth(width);}
},
onGridColumnMove:function(headerCt,col,fromIdx,toIdx){
var hFilter=headerCt.up('gridpanel').getDockedItems("#headerFilter")[0];
hFilter.move(fromIdx,toIdx);
},
task:new Ext.util.DelayedTask(),
onGridRender:function(grid,obj){
var me=this;
var container=Ext.create('Ext.container.Container',{
dock:'top',
id:'headerFilter',
componentCls:'x-column-hfilter',
weight:101,
height:22,
layout:'hbox'
});
Ext.each(grid.headerCt.items.items,function(item){
item=Ext.getCmp(item.id);
if(!item.filter){
var col=Ext.create("Ext.container.Container",{
layout:'fit',
componentCls:'x-column-no-filter',
height:container.height,
id:item.id+"-filter",
hidden:item.hidden,
width:item.flex||item.width
});
}
else{
var col=item.filter;
Ext.apply(col,{
layout:'fit',
componentCls:'x-column-filter',
id:item.id+"-filter",
hidden:item.hidden,
width:item.flex||item.width,
listeners:{
scope:me,
change:function(field,newVal,oldVal,eOpts){
me.task.delay(me.updateBuffer,function(){
var newFilter={property:item.dataIndex,value:newVal},myIndex=-1;
Ext.Array.forEach(me.filterArray,function(item2,index,allItems){if(item2.property===item.dataIndex){myIndex=index;}},this);
if(myIndex!=-1){me.filterArray.splice(myIndex,1);}
if(newVal){me.filterArray.push(newFilter);}
grid.store.clearFilter();
if(me.filterArray.length>0){grid.store.filter(me.filterArray);}
else{grid.store.filterBy(function(){return true;});}
});
}
}
});
}
container.add(col);
});
grid.dockedItems.add(container);
}
});

Allan
19 Sep 2011, 11:42 AM
Hi,

tried the demo but hit a couple of issues in FF 6.0.2 when filtering on the first column:

1. The header doesn't become bold italic or otherwise display the fact that the column is filtered.
2. There's no way to remove the filter other than reloading the page

I may be missing something here though :-)

Allan

SMMJ_Dev
19 Sep 2011, 3:30 PM
Hi Allan,

I have not implemented any style changes. I can look into doing that. Also, I just selected the text and clicked delete to remove the filter. In the demo I just did a shortcut and used the same store for the combo filter as the grid filter. This is why there is nothing else to choose in the drop down to get rid of the filter. I can update the demo to use a separate store to show you.

SMMJ_Dev
19 Sep 2011, 4:51 PM
Ok, the updates are made. I turned the combo into a clearable combo. I added a store with data for the combo. I added styles to filtered columns.

wki01
20 Sep 2011, 2:37 AM
I would replace this piece of code.....



grid.store.clearFilter();
if(me.filterArray.length>0){grid.store.filter(me.filterArray);}
else{grid.store.filterBy(function(){return true;});}


with:



if(me.filterArray.length>0){
grid.store.filter(me.filterArray);
}
else{
grid.store.clearFilter()
}

Otherwise it does not work correctly for remoteFilter: true

SMMJ_Dev
20 Sep 2011, 4:12 AM
I would replace this piece of code.....



grid.store.clearFilter();
if(me.filterArray.length>0){grid.store.filter(me.filterArray);}
else{grid.store.filterBy(function(){return true;});}


with:



if(me.filterArray.length>0){
grid.store.filter(me.filterArray);
}
else{
grid.store.clearFilter()
}

Otherwise it does not work correctly for remoteFilter: true

Thanks wki01 I will try that out.

scottmartin
20 Sep 2011, 10:09 AM
In looking at your control, there are several items I would like to see if possible:

A clear button for each field (same as your clearable combo)
possibly displays a button only on hover.

A clear on the date would be very helpful if you do not add a clear button for each.

A 'clear all' to the far right of the filter column to clear all. (and/or function so we can clear all in code)

Option to filter on <enter> instead of keypress

Regards,
Scott.

Christiand
21 Sep 2011, 2:14 AM
good work ! I like :D

morfeusz
21 Sep 2011, 3:15 AM
Good work.
But how this can be use to presents from-to values?
It is possibility to add second filter header and add to them label text (From: ... To: ...).

SMMJ_Dev
21 Sep 2011, 4:42 AM
Thanks Christiand!

I actually do not have any time for the rest of this month to do any more work on this. Feel free to add your own customizations and updates and I can try to find time at night to incorporate them. I will have more time in October to work on additional features you have requested.

Sincerely,


SMMJ_DEV/Phillip W. Moore

NOTE TO SELF: Fix bug when trying to filter for text and you have 1 extra letter that doesn't filter correctly. If you delete the 1 extra letter nothing is returned still until you delete everything out and refilter.

hschaefer123
25 Sep 2011, 3:52 AM
Hi Phillip,
great work.

for time reason i did not start to migrate my portal framework from 3.x to 4.x also a lot of plugins needs time to be migrated. Especially i missed a migration of filter header.

I think it is the time to give Ext 4 a try and i will migrate my work to Ext 4.
My HeaderFilter is based on the best of two Ext 3 Extensions (including filter reset functionallty, etc).

I will rewrite my filter code based on your approach to get it working in Ext 4 and add missing features i added to my ux. Hopefully i will find the time ;-)

Thanks for sharing,
Holger

SMMJ_Dev
25 Sep 2011, 8:05 AM
Hey Thanks Holger!

That's exactly where I stand with my work. I'm performing migrations from 3.x to 4. I actually never used the header filter plugin in 3, but while we were redoing our pages, this ended up becoming a priority need. There are still bugs I need to get time to go in and work them out. I have to have the bugs worked out before mid October so shortly after that the filtering should be fixed. I could probably work in extra functionality at the same time. I'm the only developer so we work on a development cycle in which our clients know that the initial releases will not have all bugs worked out on initial releases. We use our clients help to point out the bugs and then I go back and fix them. Sort of how ExtJS works with their releases :)

I never used GitHub before. I was performing updates to someone's Exporter plugin and messing with that. The interface is very nice. Once I get my weekends back, I'll probably move all my code over there to make it easier for people to place in updates, fixes, etc.

Anyways, any help would be great. I would love to see your filter code whenever you get it updated if you have the time.





Hi Phillip,
great work.

for time reason i did not start to migrate my portal framework from 3.x to 4.x also a lot of plugins needs time to be migrated. Especially i missed a migration of filter header.

I think it is the time to give Ext 4 a try and i will migrate my work to Ext 4.
My HeaderFilter is based on the best of two Ext 3 Extensions (including filter reset functionallty, etc).

I will rewrite my filter code based on your approach to get it working in Ext 4 and add missing features i added to my ux. Hopefully i will find the time ;-)

Thanks for sharing,
Holger

drplasma
4 Oct 2011, 6:44 AM
Thanks for your efforts.i have an issue with this plugin.Date filter is not working in opera/chrome/IE.when i exactly enter the date no results are shows.when i just type 09,no results are shown neither.pls correct me if im wrong.

SMMJ_Dev
4 Oct 2011, 10:10 AM
Thanks drplasma,

There are currently alot of bugs I still need to work out.

One big issue is that if I filter for "abcdf" instead of "abcde" and only "abcde" exists, then I will get nothing back. Then if I press backspace to filter for "abcd" the filter is applying the filter to an already empty set of data. So if filter is called when you are not finished typing and it is an incorrect value it will not show anything once you are finished typing in the filter.
I am calling the standard filter function on the store. The store does not correctly interpret the filter of 09 for the date. It looks like it only understands the full date for a valid date filter. For example if you paste in "09/28/1981" then the store is filtered correctly. Once I get some time, I will work out the errors.

wki01
10 Oct 2011, 4:21 AM
It is possible to change the property "filter" with "hfilter"?
So you can use your header-filter with the grid-filter that comes standard with ExtJS.

It therefore has the ability to have filters on two levels ...

thanks

SMMJ_Dev
13 Oct 2011, 5:31 AM
That's a good idea, I like it.

I'm almost freed up in time to start working on plugins again. Also, I'm having a problem with the clearing of the filters. This is just the standard ExtJS Store filter that I am working with. This is sort of a preview on the filter clearing that I am working with:
Button


{
xtype:'button',
id:'clrFilter'+BudgetType,
text:'Clear Filters',
iconCls:'clear_filter',
action:'clearFilter'
}


Action


var grid=button.up('gridpanel'),filters=(grid.getDockedItems("#headerFilter")[0]).query('field');
Ext.each(filters,function(filter,index,allFilters){
var header=grid.headerCt.getHeaderAtIndex(index).getEl();
if(header.hasCls('x-column-filtered')){filter.setRawValue('');filter.clearInvalid();header.removeCls('x-column-filtered');}
});
grid.store.clearFilter();

SMMJ_Dev
13 Oct 2011, 5:46 AM
Erg, I just noticed that now in the latest version ExtJS 4.0.6, the widths of the columns are unknown. I will have to create an updated for the next version.

wki01
18 Oct 2011, 7:20 AM
Consider this small improvement



....
width:item.flex||item.width,
listeners:{
scope:me,
change:function(field,newVal,oldVal,eOpts){
me.task.delay(me.updateBuffer,function(){
var newFilter={
property: item.dataIndex,
value: field.getSubmitValue()
}, myIndex=-1;
Ext.Array.forEach(
.....


So this can work ...



....
filter: {
submitFormat: "Ymd",
format : 'd/m/Y',
xtype: 'datefield'
}
....


thanks

SMMJ_Dev
19 Oct 2011, 6:19 AM
Very nice! I will definitely work that in. I'm currently anxiously awaiting ExtJS 4.0.7 or ExtJS 4.1 for a new update on the plugin. I will include this.


Consider this small improvement



....
width:item.flex||item.width,
listeners:{
scope:me,
change:function(field,newVal,oldVal,eOpts){
me.task.delay(me.updateBuffer,function(){
var newFilter={
property: item.dataIndex,
value: field.getSubmitValue()
}, myIndex=-1;
Ext.Array.forEach(
.....


So this can work ...



....
filter: {
submitFormat: "Ymd",
format : 'd/m/Y',
xtype: 'datefield'
}
....


thanks

ldonofrio
19 Oct 2011, 7:53 AM
Thanks for this SMMJ.

If you set width and not flex to the column, the initial layout is broken, you can fix this listening to render not afterrender on grid.

I'm working on features like, show/hide filters, i'll post the updated code here.

Regards

Leonardo

ldonofrio
19 Oct 2011, 10:44 AM
I've updated your code to support renderHidden, isVisible(), setVisible(), and have fixed some bugs, expecially i've fixed the filter bug that you wrote before.

I'll keep adding features to this plugin. Thanks again.

Here is the code.......


/**
* Plugin that enable filters on the grid header.<br>
* The header filters are integrated with new Ext4 <code>Ext.data.Store</code> filters.<br>
*
* @author SMMJ_Dev
* @version unversioned preview release
* @updated 2011-10-18 by Ing. Leonardo D'Onofrio (leonardo_donofrio at hotmail.com)
* Support renderHidden config option, isVisible(), and setVisible() methods (added getHeaderFilter() method to the grid)
* Fix filter bug that append filters to Store filters MixedCollection
* Fix layout broken on initial render when columns have width property
*/

Ext.define('Ext.ux.grid.HeaderFilter', {
extend: 'Ext.util.Observable',
alias: 'plugin.hfilter',
uses: [
'Ext.container.Container',
'Ext.util.DelayedTask'
],
updateBuffer: 500,

renderHidden: false,

task: Ext.create('Ext.util.DelayedTask'),

init: function(grid) {
var me = this;

me.filterArray = [];

grid.on({
scope: me,
render: me.onGridRender,
columnresize: me.onGridColumnResize,
columnhide: me.onGridColumnHide,
columnshow: me.onGridColumnShow,
columnmove: me.onGridColumnMove
});
grid.addEvents('filterupdated');

Ext.apply(grid, {
headerFilter: this,
getHeaderFilter: function() {
return this.headerFilter;
}
});

me.grid = grid;
me.container = null;
},

isVisible: function() {
return this.container.isVisible();
},

setVisible: function(visible) {
this.container.setVisible(visible);
this.grid.headerCt.doLayout();
},

onGridColumnHide: function(headerCt,col) {
var filter = Ext.getCmp(col.id + "-filter");
if(filter) { filter.hide(); }
},

onGridColumnShow:function(headerCt, col) {
var filter = Ext.getCmp(col.id + "-filter");
if(filter) { filter.show(); }
},

onGridColumnResize: function(headerCt, col, width) {
var filter = Ext.getCmp(col.id + "-filter");
if(filter) { filter.setWidth(width); }
},

onGridColumnMove: function(headerCt, col, fromIdx, toIdx) {
var hFilter = headerCt.up('gridpanel').getDockedItems("#headerFilter")[0];
hFilter.move(fromIdx, toIdx);
},

onGridRender: function(grid, obj){
var me = this;
me.container = Ext.create('Ext.container.Container', {
dock: 'top',
id: 'headerFilter',
componentCls: Ext.baseCSSPrefix + 'grid-hfilter',
weight: 101,
height: 22,
layout: 'hbox',
hidden: me.renderHidden
});
Ext.each(grid.headerCt.items.items, function(item) {
item = Ext.getCmp(item.id);
if(!item.filter) {
var col = Ext.create('Ext.container.Container', {
layout: 'fit',
componentCls: Ext.baseCSSPrefix + 'column-no-filter',
height: me.container.height,
id: item.id + "-filter",
hidden: item.hidden,
width: item.flex || item.width
});
} else {
var col = item.filter;
Ext.apply(col, {
layout: 'fit',
componentCls: Ext.baseCSSPrefix + 'column-filter',
id:item.id + "-filter",
hidden: item.hidden,
width: item.flex || item.width,
listeners: {
scope: me,
change: function(field, newVal, oldVal, eOpts) {
me.task.delay(me.updateBuffer, function() {
var newFilter = {
property: item.dataIndex,
value: newVal,
headerId: item.id
};
var myIndex = -1;
Ext.Array.forEach(me.filterArray, function(item2, index, allItems) {
if(item2.property === item.dataIndex) {
myIndex = index;
}
}, this);
if(myIndex != -1) {
me.filterArray.splice(myIndex, 1);
}
if(newVal) {
me.filterArray.push(newFilter);
if(!item.getEl().hasCls(Ext.baseCSSPrefix + 'column-filtered')) {
item.getEl().addCls(Ext.baseCSSPrefix + 'column-filtered');
}
} else {
if(item.getEl().hasCls(Ext.baseCSSPrefix + 'column-filtered')) {
item.getEl().removeCls(Ext.baseCSSPrefix + 'column-filtered');
}
}
if(me.filterArray.length > 0) {
grid.store.filters.clear();
grid.store.filter(me.filterArray);
} else {
grid.store.clearFilter();
}
me.fireEvent('filterupdated', me.filterArray, newVal, oldVal);
});
}
}
});
}
me.container.add(col);
});
grid.dockedItems.add(me.container);
}
});



Thanks drplasma,

There are currently alot of bugs I still need to work out.

One big issue is that if I filter for "abcdf" instead of "abcde" and only "abcde" exists, then I will get nothing back. Then if I press backspace to filter for "abcd" the filter is applying the filter to an already empty set of data. So if filter is called when you are not finished typing and it is an incorrect value it will not show anything once you are finished typing in the filter.
I am calling the standard filter function on the store. The store does not correctly interpret the filter of 09 for the date. It looks like it only understands the full date for a valid date filter. For example if you paste in "09/28/1981" then the store is filtered correctly. Once I get some time, I will work out the errors.

wki01
20 Oct 2011, 7:44 AM
Even a small improvement:
So this works


...
filter: {
xtype:'textfield',
hidden: (App.anag.role === "AG")
}



...
Ext.each(grid.headerCt.items.items,function(item){
item=Ext.getCmp(item.id);
if(!item.filter || item.filter.hidden === true){
var col=Ext.create("Ext.container.Container",{


thanks

wki01
21 Oct 2011, 12:47 AM
There are some problems with version 4.07 + with filters combo type + IE9.
Is not properly heard the "me.task.delay" function
I suspect it's a bug in the new version.
thanks

ldonofrio
21 Oct 2011, 8:25 AM
I've updated this code again.
Rendering code rewrited (read comments inside the file).
Support showClearButton config option, shows a button to clear the field for each column.
I'll keep adding features to this plugin.

Tested on IE9, FF7, Chrome14 ---- Ext4.0.2a (i'll test on 407 later)

Code:


/**
* Plugin that enable filters on the grid header.<br>
* The header filters are integrated with new Ext4 <code>Ext.data.Store</code> filters.<br>
*
* @author SMMJ_Dev
* @version unversioned preview release
* @updated 2011-10-18 by Ing. Leonardo D'Onofrio (leonardo_donofrio at hotmail.com)
* Support renderHidden config option, isVisible(), and setVisible() methods (added getHeaderFilter() method to the grid)
* Fix filter bug that append filters to Store filters MixedCollection
* Fix layout broken on initial render when columns have width property
* @updated 2011-10-21 by Ing. Leonardo D'Onofrio (leonardo_donofrio at hotmail.com)
* Rendering code rewrited, filters are now rendered inside de column headers, this solves scrollable grids issues, now scroll, columnMove, and columnHide/Show is handled by the headerCt
* Support showClearButton config option, render a clear Button for each filter to clear the applied filter (iconCls and tooltip configurable)
*/

Ext.define('Ext.ux.grid.HeaderFilter', {
extend: 'Ext.util.Observable',
alias: 'plugin.hfilter',
uses: [
'Ext.container.Container',
'Ext.util.DelayedTask',
'Ext.button.Button',
'Ext.layout.container.HBox'
],
updateBuffer : 500,

renderHidden : false,

showClearButton : true,
clearButtonIconCls : 'clear',
clearButtonTooltip : 'Clear this filter...',

init: function(grid) {
var me = this;

grid.on({
scope: me,
afterrender: me.onGridRender,
columnresize: me.onGridColumnResize
});
grid.addEvents('filterupdated');

Ext.apply(grid, {
headerFilter: this,
getHeaderFilter: function() {
return this.headerFilter;
}
});

me.grid = grid;
me.task = Ext.create('Ext.util.DelayedTask');
me.filterArray = [];
me.visible = true;
me.containers = null;
me.containersHeight = null;
},

onGridColumnResize: function(headerCt, col, width) {
var me = this;
if(!me.containers) return;
if (me.containers[col.id] && me.containers[col.id].rendered) {
me.containers[col.id].setWidth(width);
me.containers[col.id].doLayout();
}
},

onGridRender: function(grid) {
var me = this;
me.containers = {};

var columns = grid.headerCt.getGridColumns(true);
Ext.each(columns, function(column) {
if(column.filter) {
var filterContainer = Ext.create('Ext.container.Container', {
layout: 'hbox',
bodyStyle: 'background-color: "transparent"',
width: column.getWidth(),
padding: (me.showClearButton ? '0 1 0 0' : 0),
listeners: {
scope: me,
element: 'el',
mousedown: function(e) { e.stopPropagation(); },
click: function(e) { e.stopPropagation(); },
keydown: function(e) { e.stopPropagation(); },
keypress: function(e) { e.stopPropagation(); },
keyup: function(e) { e.stopPropagation(); }
},
items: [Ext.apply(column.filter, {
flex: 1,
column: column,
margin: 0,
listeners: {
scope: me,
change: me.applyFilters
}
})]
});
if (me.showClearButton) {
filterContainer.add({
xtype: 'button',
ui: 'default-toolbar',
margin: 0,
padding: 2,
style: 'text-align: center;',
iconCls: me.clearButtonIconCls,
tooltip: me.clearButtonTooltip,
handler: function(btn) {
btn.previousSibling().reset();
}
});
}
filterContainer.on('afterrender', function(container) {
var me = this;
if (me.containersHeight) return;
me.containersHeight = container.getHeight();
if (me.renderHidden) {
me.grid.headerCt.doLayout();
me.setVisible(false);
}
}, me, { single: true });
filterContainer.render(column.el);
this.containers[column.id] = filterContainer;
column.setPadding = Ext.Function.createInterceptor(column.setPadding, function(h) { return false; });
}
}, me);
},

isVisible: function() {
var me = this;
return me.visible;
},

setVisible: function(visible) {
var me = this;
if (!me.containersHeight) return;
if (me.visible == visible ) return;
var headerCt = me.grid.headerCt;
me.visible = visible;
headerCt.setHeight((visible ? headerCt.getHeight() + me.containersHeight : headerCt.getHeight() - me.containersHeight))
headerCt.doLayout();
},

applyFilters: function(field, newVal, oldVal, eOpts) {
var me = this;
var grid = this.grid;
var column = field.column;
me.task.delay(me.updateBuffer, function() {
var newFilter = {
property: column.dataIndex,
value: newVal,
headerId: column.id
};
var myIndex = -1;
Ext.each(me.filterArray, function(item2, index, allItems) {
if(item2.property === column.dataIndex) {
myIndex = index;
}
});
if(myIndex != -1) {
me.filterArray.splice(myIndex, 1);
}
if(newVal) {
me.filterArray.push(newFilter);
if(!column.getEl().hasCls(Ext.baseCSSPrefix + 'column-filtered')) {
column.getEl().addCls(Ext.baseCSSPrefix + 'column-filtered');
}
} else {
if(column.getEl().hasCls(Ext.baseCSSPrefix + 'column-filtered')) {
column.getEl().removeCls(Ext.baseCSSPrefix + 'column-filtered');
}
}
if(me.filterArray.length > 0) {
grid.store.filters.clear();
grid.store.filter(me.filterArray);
} else {
grid.store.clearFilter();
}
me.fireEvent('filterupdated', me.filterArray, newVal, oldVal);
}, me);
}
});

zombeerose
21 Oct 2011, 8:37 AM
A few ideas...

1) Would it be possible for you to support fuzzy/wildcard filters? Some example data:
11/13/1952
12/01/1948
03/15/1952

If I type "1952", I would like to see two records.

2) What if you auto-create a filter based on the 'editor' config of a column to avoid redefining a lot of the same properties?

3) Any chance you will add an option into the column menu to enable/disable the filter row altogether? Similar to how you can enable/disable grouping.

Thanks for the plugin :)

ldonofrio
21 Oct 2011, 8:49 AM
1) I don't need that, you can implement it.
2) This plugin doesn't care about if the grid is editable or not
3) It exists, see setVisible method, put a button in your toptoolbar or paging and toggle visible status, also supports renderHidden: true, that is what i use.

Regards


A few ideas...

1) Would it be possible for you to support fuzzy/wildcard filters? Some example data:
11/13/1952
12/01/1948
03/15/1952

If I type "1952", I would like to see two records.

2) What if you auto-create a filter based on the 'editor' config of a column to avoid redefining a lot of the same properties?

3) Any chance you will add an option into the column menu to enable/disable the filter row altogether? Similar to how you can enable/disable grouping.

Thanks for the plugin :)

scottmartin
22 Oct 2011, 10:57 AM
I've updated this code again.
Rendering code rewrited (read comments inside the file).

Some comments:
Width need to have allowances for flex columns
ugly fix:

width:(column.flex === 1) ? 2000 : column.getWidth()

Would like to have the buttons inside the editor with the clear button active on hover. It looks a bad to have the editor displayed minus the button, then a button is displayed on hover next to editor.
same idea as:
http://www.eekboom.de/ClearButton.html
(http://www.eekboom.de/ClearButton.html)http://www.sencha-addons.com/public/gms/examples/index.html


I like/purchased GMS for ExtJS3, but Saki simply quit responding to emails.

Filter does not fire if you delete a character, then hit enter. You have to clear filter and start again,

Global clear button for all. (as seen in GMS)

Regards,
Scott.

ldonofrio
24 Oct 2011, 4:40 AM
1) Can't reproduce, sizing is handled by the onGridColumnResize listener, independently of what is passed in the container's width.
2) Love it, i'll add this today
3) Can't reproduce, i'm using remoteFilter and filters are ok. Remote or Local Filter? Browser? Ext versión?
4) Will add clearFilters public method, i'm not sure about including this en the grid, users can call the method in a tollbar handler or whatever.

Thanks..

Leonardo


Some comments:
Regards,
Scott.

scottmartin
24 Oct 2011, 4:50 AM
@Leonardo

I am using 4.07

1) It simply returns the width and resize does not see to fire. I can research some more. I will say that when I manually resize the column, it is fired and the size is corrected.
2) thanks.
3) using a remote store. Backspace does not work on my end. The field has to be empty for it to work.
4) thanks.

Regards,
Scott.

ldonofrio
24 Oct 2011, 5:18 AM
ok, i'm know on 4.0.2a, tomorrow i'll upgrade my sdk and see what happens

1) Maybe 4.0.7 layout time, i'll check and if it is necesary i'll force width recalculation after layout or something
3) My backspace works on ie9, ff7 and chrome 14, seems related to the sdk versión too. Please wait. Tomorrow i'll post my comments about your issues.

Regards

Leonardo

scottmartin
24 Oct 2011, 5:40 AM
fyi,

I downgraded to 4.02a

1) Works as expected, must be 4.07 issue
3) Issue remains.
Tested:
FF7,
Chromium 17.0.916.0 (Developer Build 106700 Linux))
IE8 on a XP VM

I enter 'c' and it returns 8 results (correct)
I add 'rew' to make it 'crew' and it returns 5 results (correct)
I remove 'rew' to make it 'c' and it still shows the 5 results instead of 8
I remove 'c' and it shows all (correct)

Regards,
Scott.

scottmartin
24 Oct 2011, 6:35 AM
While you are bouncing around in the code ... please also note that g.reconfigure kills the headerFilter altogether.. May want to add something to maintain it:

grid.on({reconfigure ...})

Regards,
Scott.

ldonofrio
24 Oct 2011, 7:50 AM
i think that i found the filter bug, think that you are using local filtering, i'll fix it

scottmartin
24 Oct 2011, 8:46 AM
think that you are using local filtering

err, busted ... I had remoteSort set, but not remoteFilter.

Regards,
Scott.

ernst96
24 Oct 2011, 4:02 PM
Hi, this looks great. Has anybody implemented this with infinite scrolling?

ldonofrio
25 Oct 2011, 5:21 AM
Try it, this does nothing related to the vertical scroller


Hi, this looks great. Has anybody implemented this with infinite scrolling?

ldonofrio
31 Oct 2011, 10:43 AM
Finally i've rewrited the plugin to correct issues and add features, so i've started a new thread.

New Ext.ux.grid.FilterBar thread: http://www.sencha.com/forum/showthread.php?152923-Ext.ux.grid.FilterBar-plugin&p=666235#post666235

Regards,

Leonardo