Page 1 of 8 123 ... LastLast
Results 1 to 10 of 72

Thread: Ext.ux.form.field.ClearButton - Small clear button/icon over field

  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
      0  

    Default Ext.ux.form.field.ClearButton - Small clear button/icon over field

    A plugin for text fields (as well as date fields, combo boxes and text areas) that shows a small "clear button" in the text field when the mouse is over the field.

    Demo and download page

    This is a small feature, but initially I had totally under-estimated the effort to implement it.
    Well, I have probably over-engineered the solution a little what with the animation option to fade in/out the icon and other config options ;-)

    Feedback welcome!
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

  2. #2
    Sencha User
    Join Date
    Apr 2009
    Posts
    48
    Vote Rating
    0
      0  

    Default

    very good, thanks

  3. #3
    Touch Premium Member
    Join Date
    Jul 2008
    Posts
    28
    Vote Rating
    0
      0  

    Default

    Very very good plugins. Thanks!!!!

  4. #4
    Sencha User Remy's Avatar
    Join Date
    Apr 2008
    Posts
    306
    Vote Rating
    0
      0  

    Thumbs up

    Very nice and elegant.

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Posts
    64
    Vote Rating
    -1
      0  

    Default

    Cute, but pretty useless plugin imlementation from a usability point of view.

    The 'X' button should be always visible else it is hard to use it.

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Location
    Argentina
    Posts
    36
    Vote Rating
    0
      0  

    Default

    How could add a store reload when i clear a textfield? I wanna use it for filters, and when i clear a textfield the store is reload...

    Thanks.

  7. #7
    Sencha Premium Member
    Join Date
    Mar 2008
    Posts
    92
    Vote Rating
    4
      0  

    Default

    Quote Originally Posted by ZeusTheTrueGod View Post
    The 'X' button should be always visible else it is hard to use it.
    Please see the documentation the author has included. This option is available through the configuration options "hideClearButtonWhenEmpty" and "hideClearButtonWhenMouseOut". Setting both to false should give you the functionality you desire.

    Quote Originally Posted by stephen.friedrich View Post
    Feedback welcome!
    This is great. It is nice to be able to throw this plugin on to any textfield based input and be able to have a consistent means of clearing the field's value.

    A few small notes:
    * Your CSS references a custom image for the clear button (in a relative parent path), but this image is not linked to from the download page. I would move the image in to the same folder (or a subfolder instead of a parent), and compress the 3 files in to an archive that can be easily downloaded.

    * Some fields might be rendered already by the time this plugin is activated (like when existing input fields are being transformed to extjs fields), which causes this plugin not to register properly. This can be overcome with a simple fix to init(). Additionally, handleAfterRender does not need the parameter it has listed, since the textfield is referenced off of 'this'.

    Code:
    init: function(textField) {
      this.textField = textField;
      if (!textField.rendered) {
        textField.on('afterrender', this.handleAfterRender, this);
      } else {
        this.handleAfterRender();
      }
    },
    * In an effort to get this compatible with the next version of the BoxSelect component, I modified the calculation of the clear button positioning to be "right" based instead of "left". I believe that this change improves positioning for all fields for both always-on and hover-on cases, using the examples/form/combos.html and examples/form/field-types.html pages for testing. Textareas still suffer from text overlap, but overall they seem to behave better and more consistently between browsers.

    Code:
    /**
            * Repositions the clear button element based on the textfield.inputEl element
            * @private
            */
           repositionClearButton: function() {
               var clearButtonEl = this.clearButtonEl;
               if (!clearButtonEl) {
                   return;
               }
               var clearButtonPosition = this.calculateClearButtonPosition(this.textField);
               clearButtonEl.dom.style.right = clearButtonPosition.right + 'px';
               clearButtonEl.dom.style.top = clearButtonPosition.top + 'px';
           },
    
           /**
            * Calculates the position of the clear button based on the textfield.inputEl element
            * @private
            */
           calculateClearButtonPosition: function(textField) {
               var positions = textField.inputEl.getBox(true, true);
               var top = positions.y;
    		   var right = positions.x;
               if(this.fieldHasScrollBar()) {
                   right += Ext.getScrollBarWidth();
               }
    		   if(this.textField.triggerWrap) {
    			   right += this.textField.getTriggerWidth();
    		   }
               return {
                   right: right,
                   top: top
               };
           },
    This plugin is cleanly implemented in a way that made these changes easy to make, and works as expected across all textfield-based classes, well done!
    Last edited by kveeiv; 13 Jun 2011 at 9:28 AM. Reason: (copied modifications from original, woops)

  8. #8
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
      0  

    Default

    Quote Originally Posted by ZeusTheTrueGod View Post
    Cute, but pretty useless plugin imlementation from a usability point of view.

    The 'X' button should be always visible else it is hard to use it.
    Have a close look at the docs. Your requirement is already exactly documented:
    Ext.override(Ext.ux.form.ClearButton, {hideClearButtonWhenEmpty: false});
    IMHO it depends on your specific use case. If you want to have the clear button at a lot of text fields, then I think its better to have it only on mouse over because else it would clutter the UI too much.
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

  9. #9
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
      0  

    Default

    @kveeiv: Thanks a lot for your detailed remarks!
    I totally forgot about the button, the point about fields already being rendered is very valid and the new positioning makes sense. I'll updated the plugin shortly.

    Now I have to prepare a little for our ExtJS User Group meeting this evening...
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

  10. #10
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
      0  

    Default

    I have uploaded a new version with changes as proposed by kveeiv.

    Also fading in/out of the clear button now uses CSS3 transitions where supported - because when you moved the mouse quickly in/out of a field the ExtJS animation is jumpy.
    (Oh, well ok, mostly just for the fun of it and to learn CSS3 ;-)
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

Page 1 of 8 123 ... LastLast

Similar Threads

  1. [OPEN] [OPEN-726] bad clear icon handling when Text field is in a toolbar
    By jep in forum Sencha Touch 1.x: Bugs
    Replies: 5
    Last Post: 29 Aug 2011, 9:43 AM
  2. Ext.form.Field override : Adding an icon to a form field of any type
    By arnold in forum Ext 2.x: User Extensions and Plugins
    Replies: 2
    Last Post: 25 Mar 2011, 6:41 AM
  3. Replies: 1
    Last Post: 5 Jul 2010, 4:13 AM
  4. Feature suggestion: Ext.form.Field.clear
    By dyndan in forum Community Discussion
    Replies: 2
    Last Post: 28 Feb 2008, 4:01 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •