PDA

View Full Version : Show Grid filters in Column header versus hidden in column menu ?



WebTrauma
1 May 2014, 3:09 PM
Hi,

I have a requirement to allow filtering of my grid data by every column.

However, we need to have the filter visible in each column header versus having to access it from the column menu.

I can get an arbitrary component to render in the header, and (albeit hack-ishly) get it to hear and bubble a click, but would rather use the built in filter feature and extend Ext.ux.grid.filter.Filter as needed versus having to roll my own implementation.

Please help.

Thanks !



Ext.define('MyApp.filters.Name', {
extend : 'Ext.grid.column.Column',
alias : 'widget.MyNameFilter',
menuDisabled: true,
width: 90,
minWidth: 90,
headerName: null,




listeners: {
scope: this,
afterrender: function(component, newValue, oldValue, opts) {
var inner = component.getEl().down('.' + Ext.baseCSSPrefix + 'column-header-inner');
inner.uppy = component;
component.headerName = new Ext.form.field.Text({
width: 90,
emptyText: 'Filter By...'


});


component.headerName.render(inner);
component.headerName.inputEl.on('click', function(event) {
event.stopPropagation();
})
}
},
bubbleEvents: ['headerNameChange']
});

scottmartin
2 May 2014, 1:30 PM
There are several existing UX's already. Have a look at:
http://www.sencha.com/forum/showthread.php?152923

WebTrauma
2 May 2014, 4:46 PM
Thanks, Scott.

It would be great to simply use the plugin, but I don't think some of this is compatible with ExtJS 4.2.2...

jsakalos
2 May 2014, 9:34 PM
Maybe you like this one: Grid MultiSearch Plugin (http://extjs.eu/software/ext-grid-multisearch-plugin/).

scottmartin
3 May 2014, 8:47 AM
It would be great to simply use the plugin, but I don't think some of this is compatible with ExtJS 4.2.2

I believe there is a few posts that provide the patches needed, as I use it in 4.2.2


Maybe you like this one: Grid MultiSearch Plugin.

I was not aware this was Ext4 ready, but if it is, worth the look, as the Ext3 version was very nice.

jsakalos
3 May 2014, 9:30 AM
Yeah Scott, it is for Ext 4.x, published recently.

WebTrauma
6 May 2014, 3:35 PM
I wound up making my own, very simple implementation.