1. #1
    Sencha User
    Join Date
    Apr 2011
    Location
    Russia
    Posts
    72
    Vote Rating
    1
    vicvolk is on a distinguished road

      1  

    Default Little Filter Addon: empty values filtering

    Little Filter Addon: empty values filtering


    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:

    Code:
    /**
     * @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 -)

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,882
    Vote Rating
    440
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for the contribution.

    Scott.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    2
    Vote Rating
    0
    sach411 is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    2
    Vote Rating
    0
    sach411 is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    6
    Vote Rating
    0
    n1exceptme is on a distinguished road

      0  

    Default


    Quote Originally Posted by vicvolk View Post
    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