Little Filter Addon: empty values filtering

[vicvolk]

I modified StringFilter.js file a little bit in order to make it filter empty values in grid cells. Here are screens of what is going on.

Before:

pic1.png

After:

pic2.png


Modified StringFilter script:

/**
 * @class Ext.ux.grid.filter.StringFilter
 * @extends Ext.ux.grid.filter.Filter
 * Filter by a configurable Ext.form.field.Text
 * <p><b><u>Example Usage:</u></b></p>
 * <pre><code>
var filters = Ext.create('Ext.ux.grid.GridFilters', {
    ...
    filters: [{
        // required configs
        type: 'string',
        dataIndex: 'name',

        // optional configs
        value: 'foo',
        active: true, // default is false
        iconCls: 'ux-gridfilter-text-icon' // default
        // any Ext.form.field.Text configs accepted
    }]
});
 * </code></pre>
 */
Ext.define('Ext.ux.grid.filter.StringFilter', {
    extend: 'Ext.ux.grid.filter.Filter',
    alias: 'gridfilter.string',

    /**
     * @cfg {String} iconCls
     * The iconCls to be applied to the menu item.
     * Defaults to <tt>'ux-gridfilter-text-icon'</tt>.
     */
    iconCls : 'ux-gridfilter-text-icon',

    emptyText: 'Enter Filter Text...',
    selectOnFocus: true,
    width: 125,

    /**
     * @private
     * Template method that is to initialize the filter and install required menu items.
     */
    init : function (config) {
        Ext.applyIf(config, {
            enableKeyEvents: true,
            iconCls: this.iconCls,
            hideLabel: true,
            listeners: {
                scope: this,
                keyup: this.onInputKeyUp,
                el: {
                    click: function(e) {
                        e.stopPropagation();
                    }
                }
            }
        });	

        this.inputItem = Ext.create('Ext.form.field.Text', config);
		
        this.menu.add(this.inputItem);
		
		var me = this, 
		listeners = {
                checkchange: me.checkChange,
                scope: me
        };
				
        this.checkboxItem = Ext.create('Ext.menu.CheckItem', {
				text: 'Empty values',
                hideOnClick: false,
                value: '',
                listeners: listeners,
				scope:this
        })
		
		this.menu.add(this.checkboxItem);
		
		this.checkboxItem.addEvents('checkchange');

		this.checkboxItem.on('checkchange', this.onCheckChange, this);		
				
		this.updateTask = Ext.create('Ext.util.DelayedTask', this.fireUpdate, this);
		
		
		
    },
	checkChange:function (item, checked){
	
		if (item.checked) {
					
			this.fireEvent('checkchange', item, checked);			
		
		}
	
	},
	
    /**
     * @private
     * Template method that is to get and return the value of the filter.
     * @return {String} The value of this filter
     */
    getValue : function () {
	
		return this.inputItem.getValue();
		
    },

    /**
     * @private
     * Template method that is to set the value of the filter.
     * @param {Object} value The value to set the filter
     */
    setValue : function (value) {
		
		this.inputItem.setValue(value);
        this.fireEvent('update', this);
    },

    /**
     * @private
     * Template method that is to return <tt>true</tt> if the filter
     * has enough configuration information to be activated.
     * @return {Boolean}
     */
    isActivatable : function () {
	
		if(this.checkboxItem.checked) {
		
			return true;
			
		}
		
        else return this.inputItem.getValue().length > 0;
    },

    /**
     * @private
     * Template method that is to get and return serialized filter data for
     * transmission to the server.
     * @return {Object/Array} An object or collection of objects containing
     * key value pairs representing the current configuration of the filter.
     */
    getSerialArgs : function () {

		return {type: 'string', value: this.getValue()};
    },
	
	
	onCheckChange:function (){
	
		this.updateTask.delay(this.updateBuffer);
			
	},

    /**
     * Template method that is to validate the provided Ext.data.Record
     * against the filters configuration.
     * @param {Ext.data.Record} record The record to validate
     * @return {Boolean} true if the record is valid within the bounds
     * of the filter, false otherwise.
     */
    validateRecord : function (record) {
        var val = record.get(this.dataIndex);
		
        if(typeof val != 'string') {
            return (this.getValue().length === 0);
        }
		
		if(this.checkboxItem.checked) {
		
			if(val == "") return true;
			
		}
		
		else {
		
			return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
		
		}
    },

    /**
     * @private
     * Handler method called when there is a keyup event on this.inputItem
     */
    onInputKeyUp : function (field, e) {
	
		var k = e.getKey();
		
        if (k == e.RETURN && field.isValid()) {
            e.stopEvent();
            this.menu.hide();
            return;
        }
        		
        this.updateTask.delay(this.updateBuffer);
		
		
    }
});

Probably, will be of use to someone -)

[scottmartin]

Thank you for the contribution.

Scott.

[sach411]

I am little new to ext js and maintaining code for 3.3.1 version. I modified stringFilter similarly However getting exceptions for constructor..

ext-all.js (line 7)
TypeError: b[d.xtype || e] is not a constructorAny suggestions?

[sach411]

I could add the string filter with blank values. The checkbox for the blank fields is repeating on grid columns as we move to next column. i.e. first stringfilter column shows one checkbox for Blank value, second shows 2 and so on.
Also when I check or uncheck for specific column, the string filter for blank is cleared for all the columns.

[n1exceptme]

Probably, will be of use to someone -)

Thank you vicvolk.
Your code is very useful to me, too, but I can't understand how to make it work also for remote filtering.

Can you please help me?

Thank you again.
Alex