1. #1
    Sencha User silveralecs's Avatar
    Join Date
    Apr 2012
    Posts
    32
    Vote Rating
    1
    silveralecs is on a distinguished road

      0  

    Default Text field with clear button - Very simple and efficient

    Text field with clear button - Very simple and efficient


    A very simple and efficient textfield with clear button.

    Code:
    Ext.define('App.lib.TextClearField', {
    
    
        extend: 'Ext.form.field.Trigger',
        alias: ['widget.textclearfield', 'widget.clearfield', 'widget.cleartriggerfield'],
    
    
        trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
    
    
        onRender: function(){
            var me = this,
                el;
    
    
            me.callParent(arguments);
    
    
            el = me.triggerEl.first();
            el.hide();
        },
    
    
        onChange: function(newVal, oldVal){
            var me = this
                el = me.triggerEl.first();
    
    
            me.callParent(arguments);
    
    
            if (newVal.length){
                el.show();
            } else {
                el.hide();
            }
        },
    
    
        onTrigger1Click: function(event){
            var me = this;
            if (me.hideTrigger){
                return;
            }
            me.setValue("");
            me.fireEvent('cleartriggerclick', me, event);
        }
    });
    Don't forget to include it in the requires: [] config. Instantiate using:

    Code:
    {
        xtype: 'textclearfield' // or 'clearfield' or 'cleartriggerfield'
    }
    You can listen to the trigger click event to perform various tasks such as:

    Code:
    {
        xtype: 'textclearfield',
        listeners: {
            'cleartriggerclick': function(field){
                field.focus();
            }
        }
    }
    You can also use multiple icons, such as:
    Code:
    {
        xtype: 'textclearfield',
    
        // trigger1Cls is reserved for the 'X' ( clear ) button
    
        trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',
        trigger3Cls: ..
        ....,
    
        // onTrigger1Click is reserved for the 'X' ( clear ) button
    
        onTrigger2Click: function(event){
            alert('Clicked on search icon');
        }
    }

  2. #2
    Sencha User silveralecs's Avatar
    Join Date
    Apr 2012
    Posts
    32
    Vote Rating
    1
    silveralecs is on a distinguished road

      0  

    Default


    Everything looks fine if you use the neptune theme. Some styling needs to be applied if you use different theme.If anyone has suggestions on how to fix this without modifying the css, it will be a big help !

  3. #3
    Sencha User silveralecs's Avatar
    Join Date
    Apr 2012
    Posts
    32
    Vote Rating
    1
    silveralecs is on a distinguished road

      0  

    Default


    And here comes the first fix:

    Code:
    Ext.define('App.lib.TextClearField', {
    
    
        extend: 'Ext.form.field.Trigger',
        alias: ['widget.textclearfield', 'widget.clearfield', 'widget.cleartriggerfield'],
    
    
        trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
    
    
        onRender: function(){
            var me = this,
                el;
    
    
            me.callParent(arguments);
    
    
            el = me.triggerEl.first().parent();
            el.setVisibilityMode(Ext.Element.DISPLAY);
            el.hide();
        },
    
    
        onChange: function(newVal, oldVal){
            var me = this
                el = me.triggerEl.first().parent();
    
    
            me.callParent(arguments);
    
    
            if (newVal.length){
                el.show();
            } else {
                el.hide();
            }
        },
    
    
        onTrigger1Click: function(event){
            var me = this;
            if (me.hideTrigger){
                return;
            }
            me.setValue("");
            me.fireEvent('cleartriggerclick', me, event);
        }
    });
    This fixes the empty gap when using multiple trigger icons. Now it should work fine in all existing themes

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    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 sharing.

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    1
    Vote Rating
    0
    filko is on a distinguished road

      0  

    Default


    Here is my version for textfield with reset functionality, compatible with extjs 5.0.1.

    Code:
    Ext.define('ResetTextfield', {
    	xtype: 'resettextfield',
    	extend: 'Ext.form.field.Text',
    
    
    	triggers: {
    		reset: {
    			cls: Ext.baseCSSPrefix + 'form-clear-trigger ',
    			handler: function(field, trigger, e) {
    				field.setValue('');
    			}
    		}
    	},
    
    
    	listeners: {
    		change: function(field) {
    			field.updateResetVisibility();
    		}
    	},
    
    
    	setValue: function(value) {
    		this.callParent([value]);
    		this.updateResetVisibility();
    	},
    
    
    	updateResetVisibility: function() {
    		this.triggers.reset.setVisible(!Ext.isEmpty(this.getValue()));
    	}
    
    
    });

Thread Participants: 2

Tags for this Thread