Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
    stephen.friedrich will become famous soon enough

      0  

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

    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
    morfeusz is on a distinguished road

      0  

    Default


    very good, thanks

  3. #3
    Touch Premium Member
    Join Date
    Jul 2008
    Posts
    28
    Vote Rating
    0
    johnleroux is on a distinguished road

      0  

    Default


    Very very good plugins. Thanks!!!!

  4. #4
    Sencha User Remy's Avatar
    Join Date
    Apr 2008
    Posts
    298
    Vote Rating
    0
    Remy is on a distinguished road

      0  

    Thumbs up


    Very nice and elegant.

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Posts
    64
    Vote Rating
    0
    ZeusTheTrueGod is on a distinguished road

      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
    gustavo21 is on a distinguished road

      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
    kveeiv is on a distinguished road

      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
    stephen.friedrich will become famous soon enough

      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 Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    638
    Vote Rating
    18
    lorezyra will become famous soon enough lorezyra will become famous soon enough

      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.