Page 1 of 2 12 LastLast
Results 1 to 10 of 72

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- ??
    Posts
    658
    Vote Rating
    20
      0  

    Default

    Quote Originally Posted by stephen.friedrich View Post
    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!



    I prefer the embedded image instead of a GIF sprite.
    [thanks to apastakia for the CSS]


    Here's my CSS that works well for the EXTJS 4.1 version of this plugin...
    Code:
    .ext-ux-clearbutton {
        width: 16px;
        height: 16px;
        /* background-image: url(clear-text-icon.gif); */ /* 12 x 12 "X" */
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAG7AAABuwBHnU4NQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGASURBVDiNrZOxThthEIRn9ipegCgVHQVyEclxzi34rIODFwiVS3fELQ9AS9JRuuIJiHMnn1tky1iisCjSpQHZL+DKOyngpLNFkKww9c7+8+3+S0koKzoOdwO3UyeqlKoAIHJiwmRpfp3/HP0u17NoQJLRUXhG4QLAFl7XQsR5/mv0Qy9GSgJJNg/DGwDJP4zr6vXT0YkkGQBER+HZBmYASF48YCP5smvO+1LsPy5rm3kXwodnPszcrWX0KwA7BY6bPlngdlpmdlk7T29TBw4AzAHMHTjI09vUZe1Sii06vpoT1XI2M+9GSX0v7w0f6MsGfdnIe8OHKKnvmXl3BYT2mc3D8BHAxzXGOX3ZyLLxFADiuFaRBQMA22t1T7bB4F6ViZysxsLMif0sG0/juFaJ41oly8ZTJ/ZBzMqlIidmwkoDd2sVzLJgIAsGxUzcrbXymPzuv9dISWgm9W8ULjdhF9Hp94bf3+crS1I/HZ2I6ABYvGFciOgUZqB0jYU2Pee/yjnfEUKuaMMAAAAASUVORK5CYII=');
        background-position: 0 0;
        background-repeat: no-repeat;
        -moz-user-focus: ignore; /* https://developer.mozilla.org/en/CSS/-moz-user-focus */
        cursor: pointer;
        position: absolute;
        overflow:  hidden; /* IE 6 :-( */
        margin: 0px;
        background-color: white;
    }
    
    .ext-ux-clearbutton-mouse-over-input {
       /* background-position: 0 -12px; */
    }
    
    .ext-ux-clearbutton-mouse-over-button {
       /* background-position: 0 -24px; */
    }
    
    .ext-ux-clearbutton-mouse-down {
       /* background-position: 0 -36px; */
    }
    
    .ext-ux-clearbutton-on {
        opacity: 1;
        visibility: visible;
        transition: opacity .35s linear;
        -webkit-transition: opacity .35s linear;
        -moz-transition: opacity .35s linear;
        -o-transition: opacity .35s linear;
        -ms-transition: opacity .35s linear;
        -khtml-transition: opacity .35s linear;
    }
    
    .ext-ux-clearbutton-off {
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s linear, visibility .0s linear .35s;
        -webkit-transition: opacity .35s linear, visibility .0s linear .35s;
        -moz-transition: opacity .35s linear, visibility .0s linear .35s;
        -o-transition: opacity .35s linear, visibility .0s linear .35s;
        -ms-transition: opacity .35s linear, visibility .0s linear .35s;
        -khtml-transition: opacity .35s linear, visibility .0s linear .35s;
    }
    This makes it nicer to use in Sencha Architect.
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    ================================================
    And here are my terms...

    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.

    ================================================
    Simple. Enjoy.

  10. #10
    Sencha User
    Join Date
    Nov 2014
    Location
    Tunisia
    Posts
    18
    Vote Rating
    0
      0  

    Default

    any work for extjs 6

Page 1 of 2 12 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
  •