Grid Filter (Plugin)

[Twain]

First, congratulations Ambience, this is a great plugin!. Thanks for this excelent contribution.
I

[ambience]

Thanks,

The List type filter takes a 'store' option that allows you to provide the menu with a store that is loaded on show. Be sure that the records have their id properties set correctly and that the store either contains a field called 'text' or that you set the 'labelField' config value to the field you wish the labels to be generated from.

[steppinrazor]

Ambience did you realize that the filter demo does not save state in IE 6? This was a surprise to me, what do you think?

[notjoshing]

In my data grid, I differentiate between data types such as "int" and "float". To use your filters with these types, I modified GridFilters.js, and figured I'd put the code here in case anyone needs to do similar handling:

   getFilterClass: function(type){
        /*customizations to handle data types*/
        if( type=='int' || type=='float' ) {
            type = 'numeric';
        }
        return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];
    } 

Josh

[notjoshing]

In RangeMenu.js, you've a typo in the declaration of the fields variable in 0.2.6. When declaring the field configuration, you give this:

'eq': new Ext.ux.menu.EditableItem({
            icon:   this.icons.eq, 
            editor: new cls(typeof cfg == "object" ? cfg.gt || '' : cfg)}) 

What you want, I think, is this

'eq': new Ext.ux.menu.EditableItem({
            icon:   this.icons.eq, 
            editor: new cls(typeof cfg == "object" ? cfg.eq || '' : cfg)}) 

Josh

[notjoshing]

I found that people using my site often wanted to combine "equals" and "not equals" searches for numeric data. They also wanted to be able to use wild cards, so you could do a LIKE search, such as for "123*456.7*". In the attached edited version of RangeMenu.js, I incorporate both of these, based on 0.2.6.

I'll upload similar functionality for strings soon.

Josh

Edit: A couple things I forgot to mention:
* The code here presumes you're doing server-side filtering. To handle this in the browser, you'd need to add some regular expressions to the validation code in NumericFilter.js
* I should have uploaded the PNG I'm using for this as well. It's basically just a combination of the greater than and less than pngs, stitched together.

[wm003]

I'll upload similar functionality for strings soon.

That would be really nice! Thank you for sharing!

[m0nu]

thanks for this plugin! realy great job...

[notjoshing]

I plugged away a bit today on adding NOT EQUAL TO functionality (ne) to the string and numeric filters. Here's a summary of changes:

[LIST][*][B]

[pic_Nick]

Hello ambience!
This is really great work, but unfortunatly it is not localization-friendly, so I suggest you to make some changes:
In GridFilter.js

...
	showMenu: true,
  
	filtersText: 'Filters',

	init: function(grid){
...
	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.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());
	},
...

In BooleanFilter.js

Ext.ux.grid.filter.BooleanFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
  defaultValue: false,
  
  yesText: 'Yes',
  noText: 'No',

	init: function(){
    var gId = Ext.id();
		this.options = [
			new Ext.menu.CheckItem({text: this.yesText, group: gId, checked: this.defaultValue === true}),
			new Ext.menu.CheckItem({text: this.noText, group: gId, checked: this.defaultValue === false})];
		
		this.menu.add(this.options[0], this.options[1]);
...

In DateFilter.js

Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
	dateFormat: 'm/d/Y',
	pickerOpts: {},
  
  beforeText: 'Before',
  afterText: 'After',
  onText: 'On',
	
	init: function(){
		var opts = Ext.apply(this.pickerOpts, {
			minDate: this.minDate, 
			maxDate: this.maxDate, 
			format:  this.dateFormat
		});
		var dates = this.dates = {
			'before': new Ext.menu.CheckItem({text: this.beforeText, menu: new Ext.menu.DateMenu(opts)}),
			'after':  new Ext.menu.CheckItem({text: this.afterText, menu: new Ext.menu.DateMenu(opts)}),
			'on':     new Ext.menu.CheckItem({text: this.onText, menu: new Ext.menu.DateMenu(opts)})};
				
		this.menu.add(dates.before, dates.after, "-", dates.on);
...

With best regards.